Блог

Я сейчас работаю над настройкой слайдера, при переходе от 2-3 изображений он меняет класс. Теперь я хочу 4 изображения, и это работает нормально, однако маркеры слайдера (которые меняются между изображениями слайдера) больше не находятся в центре страницы, они выровнены немного вправо.

Вот скрипт, который я использую в HTML для изменения 2-3 изображений.

  <{if $category->getMetaValue('slider_link_two') || $category->getMetaValue('slider_link_three')}>
    <ul class="glide__bullets">
    </ul>
<{/if}>  

Вот CSS, прошу прощения за макет, есть только уменьшенный css.

 .glide__bullets {
	position: absolute;
	bottom: 18px;
	width: 97%;
	text-align: center;
	list-style: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.glide__bullets li {
	display: inline-block;
	background-color: gray;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	cursor: pointer
}
.glide__bullets li.active {
	background-color: white
}  

Как вы можете видеть, я принял временное решение изменить ширину на 97%, но как только вы переключитесь обратно на 3 изображения, это будет выглядеть глупо. Я попытался создать класс для перезаписи ширины до 97%, когда есть 4 категории, но это полностью разрушает маркеры, но, возможно, это просто потому, что я отстой в кодировании.

Итак, как я могу изменить ширину на 97% только при наличии 4 изображений, или даже лучше — выровнять ее по центру, как только будет 4 изображения. Я попытался запустить другое правило с тремя и четырьмя, но, как упоминалось выше, это, казалось, полностью испортило макет.

Если вам нужно больше, дайте мне знать, заранее спасибо!

Я протестировал ваш код, и мне это кажется прекрасным, если я не понимаю, чего вы пытаетесь достичь, это результаты, которые я получил 3 пули и 4 пули, не могли бы вы лучше объяснить, чего вы пытаетесь достичь. Спасибо 🙂