javascript - Numbering visible items in with Slick carousel

I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.

So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.

Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.

I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.

One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.

Codepen attached. Many thanks!

$('.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=".3.1/jquery.min.js"></script>
<link href=".9.0/slick-theme.min.css" rel="stylesheet"/>
<link href=".9.0/slick.css" rel="stylesheet"/>
<script src=".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>

I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.

One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.

Codepen attached. Many thanks!

$('.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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>

Share Improve this question asked Jul 12, 2019 at 11:59 bidgeeboy 593 silver badges9 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Here is an Demo using init and afterChange events

Note: Instead of html() use data() wherever possible

$('.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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>

I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.

$('.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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Numbering visible items in with Slick carousel - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)