@deespe1

Как правильно установить два slick-слайдера?

Столкнулся с такой проблемой:
Нужно реализовать вот такой каталог услуг со слайдером фотографий.
5ad49cafdaee9232316572.png
Решил использоваться slick. Все получилось, только появилась проблема: при прокрутке слайдов на одном из слайдеров - меняются все слайды на всех слайдерах.

Кто-нибудь сталкивался с подобным? как решили?

Можно задать уникальный класс для каждого слайдера, но это не совсем верно?

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  arrows: true,
  centerMode: true,
  focusOnSelect: true,
  variableWidth: false,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 575,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    ]
});
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
little front
Если коротко - пробегать по всем слайдерам используя each (или другой метод перебора массива) и привязвать слайдеры, используя this

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

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

Войти через TM ID
Похожие вопросы