@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
      }
    }
    ]
});
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
little front
Если коротко - пробегать по всем слайдерам используя each (или другой метод перебора массива) и привязвать слайдеры, используя this

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

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

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 40 000 руб.
Mailfit Москва
от 50 000 до 90 000 руб.
ООО Торбор-Агро Краснодар
от 75 000 руб.
13 дек. 2018, в 16:23
6500 руб./за проект
13 дек. 2018, в 15:33
60000 руб./за проект