javascript - 迭代匹配元素来控制自定义光滑轮播

Question

我正在使用带有一些自定义代码的光滑轮播来提供分页。它工作得很好，但现在我想在每页上有多个轮播，尽管我已经找到了解决方案，但我很难让它们与我的代码中的自定义一起使用。

这里有一个示例( Multiple Slick Sliders Issue )，它迭代具有特定类的所有元素并分配一个 ID，但我无法让它与我拥有的自定义分页代码一起使用。

$('.carousel').on('init afterChange', function(event, slick, currentSlide){
    let total = $('.carousel .item').length;
    var first = $('.slick-active:first > div:first').get(0);
    var last = $('.slick-active:last > div:last').get(0);
  if($(last).html() == '')
    last = $('.slick-active:last > div:not(:empty)').get(0);
    let start,end;
    $('.slick-slide > div').each(function(i,v){
        if(first === $(v).get(0)) {
            start = i+1;
        } 
        if(last === $(v).get(0)) {
            end = i+1;
        }
    });
  $('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
  rows: 2,
  slidesToShow: 3,
  slidesToScroll: 3,
  autoplay: false,
  arrows: true,
  infinite: false,
  draggable: false,
  prevArrow: $('.prev'),
  nextArrow: $('.next')
})

.item {
  background: silver;
  color: black;
  text-align: center;
  font-size: 30px;
  display: inline;
  border: 5px solid white;
}
.nav {
  width: 100%;
}
.nav p{
  width: 50%;
  float: left;
  display: block;
  text-align: center;
}
.results {
  text-align: center;
  width: 100%;
  padding-top: 10px
}

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


<div class="carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>
<div class="nav">
  <p class="prev">prev</p>
  <p class="next">next</p>
</div>
<div class="results">
  Showing 1 to 9 of [total] results
</div>

Answer 1

您可以创建一个包装容器来隔离实例

<div class="slider">
  <div class="carousel">
    <div class="item">1</div>
    <div class="item">2</div>

  </div>
  <div class="nav">
    <p class="prev">prev</p>
    <p class="next">next</p>
  </div>
  <div class="results">
    Showing 1 to 9 of [total] results
  </div>
</div>

然后初始化时使用each循环进行隔离

$('.slider').each(function() {
  var $slider = $(this),
      // arrows within this instance 
      $nArrow = $slider.find('.next'),
      $pArrow = $slider.find('.prev');

  // initialize this carousel instance with appropriate arrows    
  $slider.find('.carousel').slick({
    rows: 2,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: false,
    arrows: true,
    infinite: false,
    draggable: false,
    prevArrow: $pArrow,
    nextArrow:  $nArrow
  });

})

对于事件，查找容器类并使用 find() 查找该实例中的元素

$('.carousel').on('init afterChange', function(event, slick, currentSlide){
    var $slider = $(this).parent();
    // examples finding elements within this instance
    let total = $slider.find('.carousel .item').length;
    var first = $slider.find('.slick-active:first > div:first').get(0);
    var last = $slider.find('.slick-active:last > div:last').get(0);

    // use find for other elements also
    ......

})