CODEWITHSUNDEEP
javascriptjqueryhtml
bidgeeboy
bidgeeboy

Reputation: 59

Iterate matching elements to control custom slick carousels

I am using slick carousel with some custom code to provide pagination. It's working great but now I want to have multiple carousels per page and although I've found solutions, I'm having trouble getting them to work with the customisations in my code.

There is an example [here] (Multiple Slick Sliders Issue) that iterates over all elements with a particular class and assigns an ID, but I just can't get it working with the custom pagination code I have.

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

Upvotes: 0

Views: 1057

Answers (1)

charlietfl
charlietfl

Reputation: 171669

You could create a wrapper container to isolate instances

<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>

Then to initialize use an each loop for isolation

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

})

For the events , look up to the container class and use find() for the elements within that instance

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

})

Upvotes: 1

Related Questions