title: Slick Slider Navigation showing less items than supposed to at some breakpoint
body: <p>I've built a slick slider with custom navigation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function ($) {
     
      $('.slider-for').slick({
        slidesToShow: 1,
        arrows: false,
        fade: true,
        autoplay: true,
        autoplaySpeed: 2000,
        asNavFor: '.slider-nav',
        dots: false,
        customPaging: function(slick,index) {
          return '&lt;a&gt;'+'&lt;/a&gt;';
       },
  
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: false,
              dots: true,
            }
          }
          
          // You can unslick at a given breakpoint now by adding:
          // settings: "unslick"
          // instead of a settings object
        ]
  
      });
      $('.slider-nav').slick({
        infinite: true,
        slidesToShow: 5,
        asNavFor: '.slider-for',
        focusOnSelect: true,
        dots: false,
        customPaging: function(slick,index) {
          return '&lt;a&gt;' + (index + 1) + '&lt;/a&gt;';
       },
  
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              centerMode: false,
              arrows: false,
              dots: false,
            }
          }
          
          // You can unslick at a given breakpoint now by adding:
          // settings: "unslick"
          // instead of a settings object
        ]
  
        
  
      });
  
      
    
    })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700");
  @import url("https://fonts.googleapis.com/css?family=Lato:400,700");
  body {
    font-family: 'Playfair Display', serif;
  }
  
  #main-slider-wrap {
    margin-top: 100px;
    background-color: #fff;
    margin-bottom: 150px;
  }
  #main-slider-wrap .container {
    margin-top: 60px;
  }
  @media screen and (max-width: 768px) {
    #main-slider-wrap .container {
      margin-top: 40px;
    }
  }
  #main-slider-wrap .slick-slide {
    opacity: 0.2;
  }
  #main-slider-wrap .slick-slide.slick-current {
    opacity: 1;
  }
  @media screen and (max-width: 768px) {
    #main-slider-wrap .slide-item {
      opacity: 1;
    }
  }
  #main-slider-wrap .slide-item.slick-center {
    opacity: 1;
  }
  #main-slider-wrap .slide-item img {
    width: auto;
    height: 44px;
    cursor: pointer;
    margin: 0 auto;
  }
  @media screen and (max-width: 768px) {
    #main-slider-wrap .slide-item img {
      height: 54px;
    }
  }
  #main-slider-wrap .slick-dots {
    position: relative;
    list-style: none;
    text-align: center;
    padding-left: 0;
  }
  @media screen and (max-width: 1080px) {
    #main-slider-wrap .slick-dots {
      margin-top: 100px;
    }
  }
  #main-slider-wrap .slick-dots li {
    width: auto;
    margin: 0;
    margin-right: 18px;
    height: 12px;
    display: inline-block;
  }
  #main-slider-wrap .slick-dots li:last-child {
    margin-right: 0;
  }
  #main-slider-wrap .slick-dots li.slick-active a {
    background-color: #7AE1BF;
  }
  @media screen and (max-width: 480px) {
    #main-slider-wrap .slick-dots li.slick-active {
      border-bottom: none;
    }
  }
  #main-slider-wrap .slick-dots li a {
    font-size: 12px;
    cursor: pointer;
    color: #001D3A;
    text-transform: uppercase;
    width: 12px;
    display: block;
    background-color: #EEEEEE;
    height: 12px;
    border-radius: 50%;
  }
  #main-slider-wrap .slick-dots li a:hover {
    text-decoration: none;
  }
  #main-slider-wrap .slider-for .text-center a {
    border-bottom: 1px solid;
  }
  #main-slider-wrap .slider-for h3 {
    font-weight: 400;
    font-size: 24px;
    color: #000000;
    letter-spacing: -0.15px;
    text-align: center;
    line-height: 32px;
    margin-bottom: 40px;
    height: 81px;
    min-height: 81px;
  }
  @media screen and (max-width: 768px) {
    #main-slider-wrap .slider-for h3 {
      margin-bottom: 20px;
      height: auto;
      min-height: auto;
    }
  }
  #main-slider-wrap .slider-for a {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FF8672;
    text-align: center;
    line-height: 28px;
    padding-bottom: 3px;
    font-size: 16px;
  }
  #main-slider-wrap .slider-for a:hover {
    text-decoration: none;
  }
  #main-slider-wrap .slider-nav .slick-current h3 {
    border-bottom: 3px solid #00DDBD;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://13779usreg20181102.com/us/sites/all/themes/krm/slick/slick.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-10 offset-md-1"&gt;
           &lt;div id="main-slider-wrap"&gt;
             &lt;div class="center"&gt;
              &lt;div class="slider-nav text-center"&gt;
                &lt;div class="slide-item"&gt;
                  &lt;img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DailyMail_logo_desktop.png?6710"&gt;
  
                &lt;/div&gt;
                &lt;div class="slide-item"&gt;
                  &lt;img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/JCK_logo_desktop.png?6710"&gt;
                &lt;/div&gt;
                &lt;div class="slide-item"&gt;
                  &lt;img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/NationalJeweler_logo_desktop.png?6710"&gt;
  
                &lt;/div&gt;
                &lt;div class="slide-item"&gt;
                  &lt;img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DigitalCommerce_logo_desktop.png?6710"&gt;
                &lt;/div&gt;
                &lt;div class="slide-item"&gt;
                  &lt;img src="https://cdn.shopify.com/s/files/1/0046/8893/7030/files/DPA_logo_desktop.png?6710"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
             &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-sm-12 col-md-8 offset-md-2"&gt;
                  &lt;div class="slider-for"&gt;
                    &lt;div class="text-center"&gt;
                      &lt;h3&gt;They're real and they're spectacular!&lt;/h3&gt;
                      &lt;a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank"&gt;Read article&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="text-center"&gt;
                      &lt;h3&gt;A New Diamond Brand Helmed by Former Apple &amp; Sleep Number Bed Execs&lt;/h3&gt;
                      &lt;a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank"&gt;Read article&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="text-center"&gt;
                      &lt;h3&gt;Forget the 4 C’s. Meet the 3 S’s.&lt;/h3&gt;
                      &lt;a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank"&gt;Read article&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="text-center"&gt;
                      &lt;h3&gt;Diamond startup targets millennials with sparkly diamonds.&lt;/h3&gt;
                      &lt;a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank"&gt;Read article&lt;/a&gt;
  
                    &lt;/div&gt;
                    &lt;div class="text-center"&gt;
                      &lt;h3&gt;Sparkle Cut CEO interview.&lt;/h3&gt;
                      &lt;a href="https://www.dailymail.co.uk/femail/article-6655049/The-company-cracked-code-harnessing-light-diamonds-invisible-cuts.html" target="_blank"&gt;Read article&lt;/a&gt;
  
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            
            
           &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At 1024, I have it so it only shows one.</p>
  
  <p>For some reason at certain breakpoints, the top slider (slider-nav) shows less than 5 items? Not sure why it's happening? Any CSS issues? Thanks in advance!</p>
  
  <p>this one only showing 4 items
  <a href="https://i.stack.imgur.com/tLTw3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tLTw3.png" alt="only showing 4 items"></a></p>
  
  <p>this only is only showing 2
  <a href="https://i.stack.imgur.com/eh9FB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eh9FB.png" alt="only showing 2 items"></a></p>