如果slidesToShow等于总幻灯片，滑动滑块不加载幻灯片？

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

Answer 1

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.