Как сделать разные bullets у двух слайдеров?
У меня есть два Swiper-слайдера и у них должны быть разные буллеты. Но как я понял, у всех буллетов по дефолту стоят классы .swiper-pagination-bullet/.swiper-pagination-bullet-active. Хотя у их родителя может стоять любой класс.
<div class="main-pagination"> </div> |
<div class="main-pagination"> </div>
Например, родитель буллетов у меня с таким классом, но чтобы стилизовать сами точки всё равно надо прописывать стили для .swiper-pagination-bullet.
В доках свайпера увидел, что в js для пагинации можно задать bulletClass: '' и это по-идее перезапишет классы буллетов с дефолтных на свои, но у меня ничего не сработало.
В общем, подскажите, как можно прописывать стили для точек у разных слайдеров?
Дополнительно:
Используйте вложенные селекторы
самый простой вариант это прописать классы от родителя
.main-pagination .swiper-pagination-bullet {}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания разных bullets у двух слайдеров на веб-странице можно использовать различные CSS-стили для каждого из них. Вот пример кода, показывающий, как это можно сделать:
<div class="slider1"> <ul> <li>Слайд 1</li> <li>Слайд 2</li> <li>Слайд 3</li> </ul> </div> <div class="slider2"> <ul> <li>Слайд A</li> <li>Слайд B</li> <li>Слайд C</li> </ul> </div><div class="slider1"> <ul> <li>Слайд 1</li> <li>Слайд 2</li> <li>Слайд 3</li> </ul> </div> <div class="slider2"> <ul> <li>Слайд A</li> <li>Слайд B</li> <li>Слайд C</li> </ul> </div>
.slider1 ul { list-style-type: circle; /* Используем круглые маркеры для bullets первого слайдера */ } .slider2 ul { list-style-type: square; /* Используем квадратные маркеры для bullets второго слайдера */ }
В данном примере, для первого слайдера (slider1) мы использовали круглые маркеры для bullets, а для второго слайдера (slider2) - квадратные маркеры. Таким образом, у ваших двух слайдеров будут различные bullets.
Если у вас есть другие требования к стилю bullets для ваших слайдеров, вы можете настроить CSS-стили соответствующим образом, чтобы достичь нужного вам визуального эффекта.