Slick несколько классов одной и той же функции - в поисках лучшего решения

Question

Я использую Slick как дополнение для моего конечного пользователя из других команд.Я хочу максимально упростить их использование, просто изменив внешнюю обертку на (carousel-wrap-1, carousel-wrap-2… .etc), если им нужно более одного на странице.Вопросы: 1. Можно ли заставить JS работать так?(Прикреплен мой код js, плюс мое исправление для одинаковой высоты для всех слайдов.) ИЛИ 2. Я все еще могу попросить их копировать и вставлять каждый раз, когда они хотят добавить новый набор карусели, но внутри "prevArrowи nextArrow ", как сделать так, чтобы он вызывал только этого родителя?(что-то думая $ (this) + $ (". prev")) ??

$(document).ready(function(){
$("[class*='carousel-wrap-'] .carousel").slick({
prevArrow: $(".prev"),
nextArrow: $(".next"),
accessibility: true,
autoplay: true,
autoplaySpeed: 7000,
dots: true,
infinite: true,
speed: 600,
fade: true,
cssEase: 'linear',
pauseOnHover: true,
pauseOnFocus: true,
});


});

$(document).ready(function() {
  var offsetHeight = $('.slick-list').outerHeight();
  $("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});

$( window ).resize(function() {
  $("[class*='carousel-wrap-'] .carousel .band").css("height", "100%")
  var offsetHeight = $('.slick-list').outerHeight();
  $("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});

<div class="carousel-wrap-1">
<div class="carousel-control">
      <div class="prev"></div><div class="next"></div>
      </div>
      
  <div class="carousel">
      <div class="band slide1"></div>
      <div class="band slide2"></div>
      <div class="band slide3"></div>
  </div>
</div>

Answer 1

Я нашел решение для этого, но не уверен, как объединить

$("[class*='carousel-wrap-'] .carousel").each(function() {
  $(this).slick({
  appendArrows: $(this).siblings('.carousel-control'),
  accessibility: true,
  autoplay: true,
  autoplaySpeed: 7000,
  dots: true,
  infinite: true,
  speed: 600,
  fade: true,
  cssEase: 'linear',
  pauseOnHover: true,
  pauseOnFocus: true,
  });
  
   });

равной высоты вместе.