Slick slider not loading slides if slidesToShow is equal to the total slides?

Question

I am using slick slider in my project it was working fine until slidesToShow was less than total slides. But now I am facing this problem when slidesToShow is equal to total slides its not even displaying the slides properly. Here is the picture how it is displaying:

As you can see in the picture, math subject slides not even displaying properly while it has a total of seven slides and physics is displaying properly because it has 8 slides. I'm not getting what's the problem.

Here is my php code:

 <div class="slick-1"> 
    <?php $data = new WP_QUERY($args);
     $unique_chapter = array();
     while($data->have_posts()):
      $data->the_post();
      $chapter_obj = get_field('chapter');
      $chapter_obj_image = get_field('chapter', false, false);
      if( ! in_array( $chapter_obj, $unique_chapter ) ) :
      $unique_chapter[] = $chapter_obj;
     ?>
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-12">
     <a id="chapter-link" href="<?php echo get_permalink($post->ID) ?>">
        <div class="sub-slik-img-sty">
           <?php if(!empty($chapter_obj_image))echo get_the_post_thumbnail( 
             $chapter_obj_image, 'full' ); ?></div>
        <div class="text-left chapter_heading">
         <?php  if(!empty($chapter_obj))echo substr($chapter_obj->post_title,0,9) ;?></div>
        <div class="text-left chapter_text">
         <?php  if(!empty($chapter_obj))echo $chapter_obj->post_content ;?> 
    </div>
    </a>
    </div>
    <?php endif; ?>
    <?php endwhile;  ?>
    </div>

That's my JS code:

    jQuery(document).ready(function($) {
      $('.slick-1').slick({
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 7,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
        {
          breakpoint: 1200,
          settings: {
            slidesToShow: 7,
            slidesToScroll: 1
          }
        },
            {
          breakpoint: 1024,
          settings: {
            slidesToShow: 6,
            slidesToScroll: 1
          }
        },
            {
          breakpoint: 992,
          settings: {
            slidesToShow: 5,
            slidesToScroll: 1
          }
        },

        {
          breakpoint: 768,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 1
          }
        },

        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
           breakpoint: 400,
           settings: {
              arrows: false,
              slidesToShow: 2,
              slidesToScroll: 1
           },

        }]
    });
});

I tried to check after ready function if the total slides are less than 7 than clone slides but it didn't work because slides are dynamically loading through while loop when I get the length of slick-1 div it shows 5 because there are 5 subjects data coming from db so it clone slides in other subjects also which I don't need.I cannot even add another chapter because math subject only has 7 chapters. Is there any way that I can add one extra slide clone in math subject only. Please help me i'll be very thankful to you. Thats the demo slider Demo Slider

@Tushar Kumawat here are 4 pics in total if you change slidestoshow to 4 slides will not move if its is set to 3 slides will move. here is the codepen link https://codepen.io/Sameed-Ul-Hassan/pen/xBqwNK — sameed ul hassan, Mar 07 '19 at 07:26
problem is when slideToShow is equal to total number of slides than slider didn't load properly and didn't slide I want to know if there is a fix for it that I can force slider to slide even if slideToShow is equal to total number of slides. — sameed ul hassan, Mar 07 '19 at 09:49

score 1 · Answer 1 · answered Mar 08 '19 at 09:21

I have figured it out myself. All you have to do is just change this condition in complete slick.js file from this:

 _.slideCount > _.options.slidesToShow

To this

 _.slideCount >= _.options.slidesToShow

By default, it is set only for one scenario if total slides count is greater than slides to show than slides will start sliding in my case my total slide count was equal to slides to show so it was not sliding by changing this condition my problem is fixed.

Is there any way we don't override the code file to fix the problem — davecar21, Jul 07 '21 at 22:47

score 1 · Answer 2 · answered Sep 20 '22 at 12:41

Unfortunately this is a bug in Slick. One solution is to simply repeat the items so there are at least one more than slides. Can be achieved by adding this code before the slick initialisation:

    let maxSlidesToShow = 7;
    while ($('.slick-1 > div').length <= maxSlidesToShow) {
      $('.slick-1 > div').each(function() {
        $(this).clone().appendTo('.slick-1');
      });
    }

It repeats the slides as many times as required, so there are always at least one more slide than shown by the slider.

score 0 · Answer 3 · edited Oct 11 '19 at 14:56

0

I think a better solution is to make that optional:
put in a new parameter in defaults

_.defaults = {
   loopIfEqual: false,

then change all

_.slideCount > _.options.slidesToShow

to

( (_.slideCount > _.options.slidesToShow) || (loopIfEqual && ( _.slideCount == _.options.slidesToShow )) )

and add "loopIfEqual": true to your slick-data, as needed.

edited Oct 11 '19 at 14:56

Das_Geek

2,775
7
20
26

answered Oct 11 '19 at 13:49

Rammy Meyerowitz

1

score 0 · Answer 4 · answered Sep 25 '20 at 11:43

I have fixed the issue with the following code.

var totalSlides = $('.view-id-faculty_carousel.view-display-id-block_1 > .view-content .views-row').length;
  // Faculty Carousel
  $('.view-id-faculty_carousel.view-display-id-block_1 > .view-content').slick({
    infinite: true,
    slidesToShow: totalSlides >= 4 ? 4 : totalSlides,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: totalSlides >= 3 ? 3 : totalSlides,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: totalSlides >= 2 ? 2 : totalSlides,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

Slick slider not loading slides if slidesToShow is equal to the total slides?

4 Answers4

Linked