@Shadowman69
Верстать или не верстать - вот в чем вопрос?

Как привязать стрелочки к конкретному слайдеру в Slick Slider?

Сделал слайдер из стрелочками на Slick Slider. Но дело в том, что из бекенда мне приходит несколько таких слайдов, и когда я нажимаю на стрелочки любого из этих слайдеров, то картинки всегда меняются только на последнем слайдере. Подскажите, как привязать стрелочки слайда к нему самому конкретно, чтоб каждая пара стрелок работала только в текущем слайдере, а не в последнем.
  • Вопрос задан
  • 288 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Читаем документацию, видим, что nextArrow может принимать string (html | jQuery selector) | object (DOM node | jQuery object)
Чуть-чуть думаем, и понимаем, что мы можем передать сюда любой jquery-объект со страницы. Осталось только выбрать нужный.
Кнопочки обычно недалеко от слайдера, значит их легко найти через общего родителя.
Ну и всё. Осталось только наговнокодить.
Примерно так:

$('[data-carousel]').each((index, el) => {
  const $carousel = $(el);
  let what        = $carousel.data('carousel');

  if (!carouselConfig.hasOwnProperty(what)) return;

  let $arrows = $carousel.parents('.carousel-wrapper').find('.arrows').children();

  $carousel.slick({
    arrows   : true,
    infinite : true,
    prevArrow: $arrows.filter('.arrows__prev'),
    nextArrow: $arrows.filter('.arrows__next'),
    ...carouselConfig[what],
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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