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

    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],
      });
    });
    Ответ написан
    3 комментария