How to bind arrows to a specific slider in Slick Slider?

Question

JavaScript

I made a slider with arrows on Slick Slider. But the fact is that several such slides come to me from the backend, and when I click on the arrows of any of these sliders, the pictures always change only on the last slider. Tell me how to bind the slide arrows to it specifically, so that each pair of arrows works only in the current slider, and not in the last one.

Answer 1

Reading the documentation , we see that nextArrow can take string (html | jQuery selector) | object (DOM node | jQuery object)
We think a little, and we understand that we can pass here any jquery object from the page. It remains only to choose the right one.
Buttons are usually not far from the slider, which means they are easy to find through a common parent.
Well, that's all. It remains only to nagovnokodit.
More or less like this:

$('[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],
  });
});