javascript - 使用 Slick 轮播对可见项目进行编号

Question

我使用 slick.js 在每张幻灯片上显示 6 个项目(2 行，3 列)的网格。我需要正常的上一个和下一个箭头导航，但也希望将事件项目计数显示为分页帮助的形式。

因此，如果在第二张幻灯片上，文本应为“显示 7 - 12 个结果”。我只能找到显示幻灯片编号的方法，而不是显示项目，并且每当浏览幻灯片时此文本都需要更新。

除非有一个我还没有找到的灵活选项，否则我必须循环遍历所有项目，用数字对它们进行索引，并找到哪些项目具有父类“.slick-active”。但我还没有成功。

我也在努力显示总项目，因为 slick 似乎提供的最接近的东西是幻灯片计数，但这与幻灯片有关，而不是其中的项目。

一个问题是这些项目并不总是 6 的完美倍数，因此最后一页的项目可能少于 6 个。

附有Codepen。非常感谢!

$('.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

这是一个使用 init 和 afterChange 的演示 events

注意:使用data()代替html()只要有可能

$('.carousel').on('init afterChange', function(event, slick, currentSlide){
  let total = $('.carousel .item').length;
  let start = $('.carousel .slick-active:first .item:first').html();
  let end = $('.carousel .slick-active:last .item:last').html();
  
  $('.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>