massef
@massef

Как ограничить кол-во dots в slick слайдере?

Здравствуйте.

Подскажите пожалуйста, как ограничить количество точек (dots) до 5 штук и зациклить сами точки?
Слайдов много, они зациклены, нужно выводить 5 точек и когда активность дошла до последней точки, то начинать снова с первой.
Используется слайдер slick
  • Вопрос задан
  • 2265 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Santa_Claus
Набросал небольшой скриптик на jsbin (для любого кол-ва слайдов).
Принцип в том, что все dots скрываем через стили и отображаем только активную точку, а также 2 слева и 2 справа от нее.
Думаю, разобраться будет не сложно - там все закомментировано.

PS: Можно сделать это с позиционированием и плавной прокруткой точек, но подумал об этом уже после реализации текущего варианта :)
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Количество точек = общее количество слайдов / количество показываемых за раз слайдов
А за зацикливание отвечает опция infinite.
Ответ написан
autoplay: true - этот параметр отвечает автоматическую смену.
infinite: true - этот параметр отвечает за цикличность
Как ограничить количество точек (dots) до 5 штук - а вот ответ будет таким:
- если скроллить будете по 1 картинки то
slidesToShow: 1,
slidesToScroll: 1,
и естественно количество блоков внутри конструкции slick должно быть 5
- если скроллить к примеру будете 2 элемента и хотите чтобы точек (dots) было 5
slidesToShow: 2,
slidesToScroll: 2,
и конечно количество блоков внутри конструкции slick должно быть 10

Общий смысл какой! надо задать слайдеру понять сколько мы собираемся блоков скроллить! и сколько отображать - относительно этого он сам отобразит количество точек (dots)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы