Как задать различные маркеры для элементов списка в двух слайдерах?

Question

OrionOutlaw

html , css

Как задать различные маркеры для элементов списка в двух слайдерах?

Как я могу прописывать стили для точек у двух различных Swiper-слайдеров, чтобы у них были разные буллеты, учитывая, что у всех буллетов по умолчанию установлены классы .swiper-pagination-bullet и .swiper-pagination-bullet-active? Я пробовал использовать опцию bulletClass в JS для пагинации, но она не сработала. Как мне это сделать?

24 декабря 2023 г. 16:37

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы задать различные маркеры (буллеты) для элементов списка в двух слайдерах, вы можете использовать опцию `bulletClass` в JS для каждого слайдера.

Пример кода:

```javascript
// Инициализация первого слайдера
var swiper1 = new Swiper('.swiper-container1', {
  // другие настройки слайдера
  pagination: {
    el: '.swiper-pagination1',
    clickable: true,
    bulletClass: 'swiper-pagination1-bullet',
    bulletActiveClass: 'swiper-pagination1-bullet-active'
  }
});

// Инициализация второго слайдера
var swiper2 = new Swiper('.swiper-container2', {
  // другие настройки слайдера
  pagination: {
    el: '.swiper-pagination2',
    clickable: true,
    bulletClass: 'swiper-pagination2-bullet',
    bulletActiveClass: 'swiper-pagination2-bullet-active'
  }
});
```

В этом примере два слайдера и каждый имеет свою пагинацию с уникальными классами для буллетов. Затем вы можете определить стили для каждого класса буллета в CSS, чтобы у них были разные стили.

Пример CSS:

```css
.swiper-pagination1-bullet {
  background-color: red;
}

.swiper-pagination1-bullet-active {
  background-color: blue;
}

.swiper-pagination2-bullet {
  background-color: green;
}

.swiper-pagination2-bullet-active {
  background-color: yellow;
}
```

В этом примере буллеты первого слайдера будут красными, а активный буллет будет синим. Буллеты второго слайдера будут зелеными, а активный буллет - желтым.

Не забудьте изменить селекторы классов и настройки слайдеров в соответствии с вашим кодом HTML и CSS.

Answer 2

самый простой вариант это прописать классы от родителя 
 .main-pagination  .swiper-pagination-bullet {}