title: Slick slider not loading slides if slidesToShow is equal to the total slides?
body: <p>I am using slick slider in my project it was working fine until <strong>slidesToShow</strong> was less than total slides. But now I am facing this problem when <strong>slidesToShow</strong> is equal to total slides its not even displaying the slides properly.
  Here is the picture how it is displaying:</p>
  
  <p><a href="https://i.stack.imgur.com/1WdJG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1WdJG.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>Here is my php code:</p>
  
  <pre><code> &lt;div class="slick-1"&gt; 
      &lt;?php $data = new WP_QUERY($args);
       $unique_chapter = array();
       while($data-&gt;have_posts()):
        $data-&gt;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;
       ?&gt;
       &lt;div class="col-xs-6 col-sm-6 col-md-4 col-lg-12"&gt;
       &lt;a id="chapter-link" href="&lt;?php echo get_permalink($post-&gt;ID) ?&gt;"&gt;
          &lt;div class="sub-slik-img-sty"&gt;
             &lt;?php if(!empty($chapter_obj_image))echo get_the_post_thumbnail( 
               $chapter_obj_image, 'full' ); ?&gt;&lt;/div&gt;
          &lt;div class="text-left chapter_heading"&gt;
           &lt;?php  if(!empty($chapter_obj))echo substr($chapter_obj-&gt;post_title,0,9) ;?&gt;&lt;/div&gt;
          &lt;div class="text-left chapter_text"&gt;
           &lt;?php  if(!empty($chapter_obj))echo $chapter_obj-&gt;post_content ;?&gt; 
      &lt;/div&gt;
      &lt;/a&gt;
      &lt;/div&gt;
      &lt;?php endif; ?&gt;
      &lt;?php endwhile;  ?&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>That's my JS code:</p>
  
  <pre><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
             },
  
          }]
      });
  });
  </code></pre>
  
  <p>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 <strong>slick-1</strong> 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 <a href="http://codepen.io/Sameed-Ul-Hassan/pen/xBqwNK" rel="nofollow noreferrer">Demo Slider</a></p>