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

Question

[Shadowman69]

Сделал слайдер из стрелочками на Slick Slider. Но дело в том, что из бекенда мне приходит несколько таких слайдов, и когда я нажимаю на стрелочки любого из этих слайдеров, то картинки всегда меняются только на последнем слайдере. Подскажите, как привязать стрелочки слайда к нему самому конкретно, чтоб каждая пара стрелок работала только в текущем слайдере, а не в последнем.

Answer 1

[Сергей delphinpro]

Читаем документацию, видим, что 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],
  });
});

Comments

[Shadowman69]

Что то сложновато понять что есть что. Верстка такова:

<div class="proposal_item">
           <div class="proposal_item-title"></div>
           <div class="proposal_item-content">
                  <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
                  <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                  <div class="gallery">
                       <img src="images/interior_1.jpg" alt="#"/>
                       <img src="images/interior_2.jpg" alt="#"/>
                       <img src="images/interior_3.jpg" alt="#"/>
                       <img src="images/interior_4.jpg" alt="#"/>
                       <img src="images/interior_5.jpg" alt="#"/>
                       <img src="images/interior_6.jpg" alt="#"/>
                       <img src="images/interior_7.jpg" alt="#"/>
                       <img src="images/interior_8.jpg" alt="#"/>
                       <img src="images/interior_9.jpg" alt="#"/>
                       <img src="images/interior_10.jpg" alt="#"/>
                    </div>
           </div>
     </div>

Можете первую часть вашего кода отредагировать с учетом классов верстки если Вам не сложно, а то я с джава скрипт очень туго. Тег <i> это как раз стрелочки.

[Сергей delphinpro]

$('.gallery').each(function(index, el) {
  var $carousel = $(el);
  var $arrows   = $carousel.parents('.proposal_item-content').children('.fa');

  $carousel.slick({
    prevArrow: $arrows.filter('.fa-chevron-circle-left'),
    nextArrow: $arrows.filter('.fa-chevron-circle-right'),
    // ... остальные настройки
  });
});

[Shadowman69]

Сергей, Вы очень хороший специалист) Помогло, спасибо Вам огромное.