How to implement multiple slick-sliders with the same class?

Question

JavaScript

I have several sliders of the same class, and I need the arrows to switch only their slider
, I tried like this, but it's not clear where the initialization comes from

prevArrow: $(this).parents().find('.thumbnail-slider_prev-arrow'),
  nextArrow: $(this).parents().find('.thumbnail-slider_next-arrow'),

Please tell me how to do it?

<div class="thumbnail">
                <div class="thumbnail-slider">
                  <a href="#" class="thumbnail-slider__item" style="background-image: url(img/main/product1.jpg);"></a>
                  <a href="#" class="thumbnail-slider__item" style="background-image: url(img/main/product2.jpg);"></a>
                  <a href="#" class="thumbnail-slider__item" style="background-image: url(img/main/product3.jpg);"></a>
                  <a href="#" class="thumbnail-slider__item" style="background-image: url(img/main/product4.jpg);"></a>
                </div>
                <div class="thumbnail-slider-arrow thumbnail-slider_prev-arrow"></div>
                <div class="thumbnail-slider-arrow thumbnail-slider_next-arrow"></div>
              </div>

$('.catalog-wrap .goods-item .thumbnail-slider').slick({
  infinite: true,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  prevArrow: '.thumbnail-slider_prev-arrow',
  nextArrow: '.thumbnail-slider_next-arrow',
});

Answer 1