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

Question

[oksana_melikhova]

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

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


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

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

<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);
}

Answer 1

[Виталий Першин]

Потому что там вложенные селекторы, а следовательно специфичность нативных стилей выше. Если хотите переопределить стили, вам необходимо либо применить такую же специфичность, но определить стили после стилей 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>';
            },
        },

Comments

[oksana_melikhova]

Здравствуйте. Извините, а можете подробнее объяснить, как создать кастомную пагинацию и определить стили? Я правильно поняла, что в '' надо прописать названия классов, а после их стилизовать в CSS?

[Виталий Першин]

oksana_melikhova, Примерно так:

[oksana_melikhova]

Спасибо большое! Теперь буду по полочкам разбирать ваш код, чтобы понять принцип работы с буллетами

Answer 2

[EvgenyApMr]

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

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

Comments

[oksana_melikhova]

Есть position: relative

[Николай]

oksana_melikhova, можете код выложить в песочнице или есть рабочая ссылка сайта?

[Николай]

oksana_melikhova, и что не так с псевдоэлементом приключилось?

[oksana_melikhova]

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