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

Question

[massef]

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

Подскажите пожалуйста, как ограничить количество точек (dots) до 5 штук и зациклить сами точки?
Слайдов много, они зациклены, нужно выводить 5 точек и когда активность дошла до последней точки, то начинать снова с первой.
Используется слайдер slick

Comments

[ilyaOrel]

Столкнулся с этой же проблемой
и вышел з положения сделав dots как asNavFor
Этот вариант подойдет для тех кто не использует превью/нав изображения в слайдере (так как вместо них мы используем dots)
Возможны нюансы но код использовал такой
- не получилось только придумать как зациклить
- можно просто вместо маленьких изображений выводить точки и dots не использовать ))
В общем как костыль.... но работает

$('.post-slider').slick({
  infinite: false,
  slidesToShow: 2,
  dots: true,
  appendDots: '.post-slider-wrap',
  arrows: false,
  asNavFor: '.post-slider-wrap .slick-dots'
});
$('.post-slider-wrap .slick-dots').slick({
    dots: false,
    infinite: false,
    arrows: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.post-slider',
});

Answer 1

[Claus]

Набросал небольшой скриптик на jsbin (для любого кол-ва слайдов).
Принцип в том, что все dots скрываем через стили и отображаем только активную точку, а также 2 слева и 2 справа от нее.
Думаю, разобраться будет не сложно - там все закомментировано.

PS: Можно сделать это с позиционированием и плавной прокруткой точек, но подумал об этом уже после реализации текущего варианта :)

Comments

[Oksizamnojzombi]

Огромное спасибо!)) пригодился Ваш скриптик, и спас меня))

Answer 2

[Алексей Уколов]

Количество точек = общее количество слайдов / количество показываемых за раз слайдов
А за зацикливание отвечает опция infinite.

Comments

[massef]

Да, я в курсе как работают dots, но нужно как то ограничить, а у меня знаний не хватает как это сделать. Тут похоже костыль как-то нужен.
А зациклить нужно сами точки, по мимо слайдов, я дополнил вопрос.

[massef]

Забыл добавить. я не могу выводить больше одного слайда, так по дизайну.

[LittleFatNinja]

massef: так зачем 5 точек?

[massef]

LittleFatNinja В смысле зачем? Это слайдер отзывов, их 49 штук, поэтому нужно ограничить до 5 точек.

Answer 3

[Борис Шепелев]

autoplay: true - этот параметр отвечает автоматическую смену.
infinite: true - этот параметр отвечает за цикличность
Как ограничить количество точек (dots) до 5 штук - а вот ответ будет таким:
- если скроллить будете по 1 картинки то
slidesToShow: 1,
slidesToScroll: 1,
и естественно количество блоков внутри конструкции slick должно быть 5
- если скроллить к примеру будете 2 элемента и хотите чтобы точек (dots) было 5
slidesToShow: 2,
slidesToScroll: 2,
и конечно количество блоков внутри конструкции slick должно быть 10

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

Comments

[massef]

Борис Шепелев я не совсем понял или вы не так поняли ). Есть 49 отзывов, один отзыв = один слайд, само собой выводит ьвсе 49 точек не вариант, поэтому нужно показывать только 5. Допустим листаем с первого слайда, точки активируются на соответствующем по счету, долистали до 5го слайда и отсчет у точек снова начинается с первой, т.е. нужно зациклить сами точки. Слайды уже зациклены.

[massef]

Вернее долистали до 6го слайда и точки снова пошли по кругу.

[Борис Шепелев]

дорогой друг! тебе тогда надо брать и писать свою реализацию! так будет проще чем править существующий ГОТОВЫЙ и ОТТОЧЕННЫЙ алгоритм

[massef]

Простенький слайдер я еще смогу написать, но вот такой финт с точками даже пока не представляю как можно провернуть. Буду думать, спасибо.