Как ограничить количество буллетов в Swiper?

Question

[Александра]

Подскажите, как настроить динамическую пагинацию в Swiper, чтобы всегда отображалось только три буллета?
https://codepen.io/Alexandra0906/pen/qBPOEzo

Comments

[lUser L]

https://codesandbox.io/s/uztvw
У них же есть классная дока, там же демо. Вы доку не смотрели видимо ?

[Александра]

Эмиль 🔥, смотрела, но про ограничения количества в документации не нашла
В демо также нет ограничения

Answer 1

[Антон Шаманов]

1. чтобы все это выглядело как надо, нужно полностью скопировать приведенный css (на первых порах пока не разберешься)
2. если ты в js объявляешь кнопки, то они должны присутствовать и в html
3. dynamicMainBullets: 3 (капитан очевидность спешит на помощь)

Comments

[Александра]

Приведённый из демки код влияет только на сам слайд
dynamicMainBullets: 3 - устанавливала, он сам по себе задачу не решает
Он добавляет класс .swiper-pagination-bullet-active-main к трём элементам пагинации

Попробовала скрыть все буллеты кроме .swiper-pagination-bullet-active-main через css - но работает это коряво. Перемещение при скролле неверное + на последнем слайде отображается только 2 буллета
https://codepen.io/Alexandra0906/pen/QWqNbdW

[Антон Шаманов]

Александра, ага, нужно при каждом смешении вправо перемещать последний элемент в начало списка, а при смещении влево - наоборот

Answer 2

[Александра]

Возможно, не идеальное, но рабочее решение создать псевдо- пагинацию из трёх буллетов
В обход динамической пагинации
Возможно, кому-то пригодиться
https://codepen.io/Alexandra0906/pen/LYzNGGp

Comments

[Антон Шаманов]

а какой тогда в ней смысл?

[Александра]

Исключительно визуальный) Как индикатор прогресса, благо большего не требовалось