Какой слайдер подойдет для данного блока?

Question

[Дядя Толя]

Смотрел Swiper, но по демкам что-то не нашёл похожее.

Answer 1

[Kirill Udaltsov]

Такое можно реализовать с помощью Slick Slider

Листайте вниз, там будет раздел Slider Syncing, где реализован похожий функционал

Суть заключается в создании двух слайдеров, синхронизируемых между собой:

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Comments

[Дядя Толя]

Спасибо большое за ответ. Я не совсем понял что вы имеете ввиду о похожем функционале?
Просто у меня получается верхняя часть с логотипами компаний не двигается, лишь ползунок должен двигаться, а там в демке это работает иначе.

[Kirill Udaltsov]

sh4rov, вы можете отображать все 6 слайдов одновременно, убрать стрелки и точки навигации, отключить центрирование и адаптировать слайдер под мобильные устройства:

$('.slider-nav').slick({
  slidesToShow: 6,
  arrows: false,
  dots: false,
  centerMode: false,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3,
        arrows: true,
      }
    },
});

[Kirill Udaltsov]

sh4rov, данный слайдер отмечает активный слайд классом slick-active, имея это, вы можете спокойно реализовать подобный ползунок на чистом js

[Дядя Толя]

Kirill Udaltsov, спасибо большое за ответы. В js почти нулевой, поэтому я это не реализую так просто. Но решение я от вас увидел.