如何能够向页面添加任意数量的具有相同 class 的光滑滑块？

Question

用户可以通过管理面板向页面添加任意数量的滑块。如何使所有具有相同 class 的滑块初始化？

如何确保单独应用每个滑块的控制按钮，而不仅仅是最后一个滑块？

现在按钮仅适用于最后一个滑块。

$('.sliderBox').slick({
  autoplay: true,
  prevArrow: $('.sliderLeftBtn'),
  nextArrow: $('.sliderRightBtn'),
  dots: true,
  appendDots: $('.sliderControl'),
});

.smallSlider-Item img{
  width: 200px;
  background: #red;
  height:300px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="sliderBox">
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
</div>

<div class="sliderControl">
  <div class="arrowLeft sliderLeftBtn"></div>
  <div class="arrowRight sliderRightBtn"></div>
</div>
</div>


<div class="sliderBox">
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
  <a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
  </a>
</div>

<div class="sliderControl">
  <div class="arrowLeft sliderLeftBtn"></div>
  <div class="arrowRight sliderRightBtn"></div>
</div>
</div>

Answer 1

我通过运行通过每个滑块元素找到了解决方案。由于您的标记中存在一些错误，我对所有内容进行了一些编辑。

$(document).ready(function() {

  $('.slider-container').each(function(index, element) {
    var $sliderBox = $(element).find('.slider-box'),
      $sliderControls = $sliderBox.next('.slider-controls');
    
    $sliderBox.slick({
      autoplay: true,
      dots: true,
      prevArrow: $sliderControls.find('.slider-button.button-prev'),
      nextArrow: $sliderControls.find('.slider-button.button-next'),
      appendDots: $sliderControls,
    });
  });

});

.slider-controls .slick-dots {
  position: static;
  bottom: initial;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="slider-container">
  <div class="slider-box">
    <a href="#01"><h3>01</h3></a>
    <a href="#02"><h3>02</h3></a>
    <a href="#03"><h3>03</h3></a>
    <a href="#04"><h3>04</h3></a>
    <a href="#05"><h3>05</h3></a>
  </div>
  <div class="slider-controls">
    <button class="slider-button button-prev">&lt; Prev</button>
    <button class="slider-button button-next">Next &gt;</button>
  </div>
</div>

<div class="slider-container">
  <div class="slider-box">
    <a href="#06"><h3>06</h3></a>
    <a href="#07"><h3>07</h3></a>
    <a href="#08"><h3>08</h3></a>
    <a href="#09"><h3>09</h3></a>
    <a href="#10"><h3>10</h3></a>
  </div>
  <div class="slider-controls">
    <button class="slider-button button-prev">&lt; Prev</button>
    <button class="slider-button button-next">Next &gt;</button>
  </div>
</div>

如何能够向页面添加任意数量的具有相同 class 的光滑滑块？

How to make it possible to add any number of slick sliders with the same class to the page?

javascript

jquery

slick.js