Почему не получается поместить буллеты по центру справа?

Как должно быть

Как выходит у меня

Не могу понять, в чём причина - пробовала двигать буллеты с помощью флексов и абсолютного позиционирования, по центру получается поставить, а пробить к правому краю - нет

И как сделать такой стиль на активном буллете? Пробовала с псевдоэлементом, но толкового ничего не вышло

<div class="swiper-pagination"></div>

.header-slider .swiper-pagination { /* 	position: absolute; 	top: 50%;          rigth: 0;   */ 	display: flex; 	justify-content: center; 	align-items: flex-end; 	gap: 15px; 	flex-direction: column; 	z-index: 10000; }  .header-slider .swiper-pagination-bullet { 	width: 10px; 	height: 10px; 	background-color: var(--white-color); }

Дополнительно:

Потому что там вложенные селекторы, а следовательно специфичность нативных стилей выше. Если хотите переопределить стили, вам необходимо либо применить такую же специфичность, но определить стили после стилей swiper:

.header-slider>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic

либо повысить специфичность:

.header-slider.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic

Но лучше создать кастомную пагинацию и самостоятельно определять стили:

pagination: {             el: '.dots',             type: "bullets",             clickable: true,             bulletClass: "dot",             bulletActiveClass: "dot_active",             renderBullet: function (index, className) {                 return '<div class="' + className + '"></div>';             },         },

• Здравствуйте. Извините, а можете подробнее объяснить, как создать кастомную пагинацию и определить стили? Я правильно поняла, что в '' надо прописать названия классов, а после их стилизовать в CSS?
• oksana_melikhova, Примерно так:
  snippet
• Спасибо большое! Теперь буду по полочкам разбирать ваш код, чтобы понять принцип работы с буллетами

Ответы:

Попробуйте к .header-sloder применить свойство position: relative, а потом .swiper-pagination перемещать через абсолютное позиционирование, например:

position: absolute;
right: 0;
bottom: 0;

• Есть position: relative
  

  

• oksana_melikhova, можете код выложить в песочнице или есть рабочая ссылка сайта?
• oksana_melikhova, и что не так с псевдоэлементом приключилось?
• Николай, Только дополнить кодом секции могу здесь же
  Псевдоэлемент не смогла подогнать под буллет. Рисовала им бордер