title: Slick slider - Slides shrink as more slides load into the slider
body: <p>I am struggling to understand why my slick slider, the navigation smaller slider shrinks in size as new images are loaded into the slider.</p>
  <p>It is very hard to explain what I am seeing happen, so maybe I can explain what I wish to happen and you can see the difference yourself in this example and guide me from there:</p>
  <p><a href="https://codepen.io/jason-is-my-name/pen/QWNWMyY?editors=1111" rel="nofollow noreferrer">https://codepen.io/jason-is-my-name/pen/QWNWMyY?editors=1111</a></p>
  <p>I wish to float a navigation slider over the top of a full width slider at the bottom left, spaced out using margin to line up with my page content that is 1248px wide.</p>
  <p>The navigation slider will just be the same images as the larger full width slider, in thumbnail size, that will act as the 'dots' of the slider to help navigate to each slide.</p>
  <p>I appreciate I haven't set this up as the navigation as of yet. I am just trying to get the styles to work. I wish for the navigation slider, to be as wide as is required to fit in however many slides are present, but with a maximum width of 100% and a maximum pixel width of 624px (if this doesn't exceed the page width).</p>
  <p>The example link, doesn't directly represent what I am seeing. But it is still broken and is a direct copy of my code after page load.</p>
  <p>You can see a video of exactly what I am seeing here: <a href="https://streamable.com/6o4q2x" rel="nofollow noreferrer">https://streamable.com/6o4q2x</a></p>
  <p>Before page load I am using PHP to insert the slider assets like this:</p>
  <pre><code>&lt;div class=&quot;the-slider-container&quot;&gt;
      &lt;div id=&quot;the-slider&quot; class=&quot;the-slider&quot;&gt;
  
          &lt;?php
          global $product;
          $product_image_ids = $product-&gt;get_gallery_image_ids();
  
          foreach( $product_image_ids as $product_image_id ) :
              $image_url = wp_get_attachment_url( $product_image_id ); ?&gt;
  
              &lt;div class=&quot;the-slider-slide&quot; style=&quot;background-image: url('&lt;?php echo $image_url; ?&gt;');&quot;&gt;
                  &lt;img class=&quot;the-slider-slide-image&quot; src=&quot;&lt;?php echo $image_url; ?&gt;&quot; alt=&quot;Product image&quot; style=&quot;display: none;&quot;&gt;
              &lt;/div&gt;
  
          &lt;?php
          endforeach; ?&gt;
  
      &lt;/div&gt;
  
      &lt;div class=&quot;the-slider-nav-container&quot;&gt;
          &lt;div class=&quot;the-slider-nav-container-inner&quot;&gt;
              &lt;div id=&quot;the-slider-nav&quot; class=&quot;the-slider-nav&quot;&gt;
  
                  &lt;?php
                  global $product;
                  $product_nav_image_ids = $product-&gt;get_gallery_image_ids();
  
                  foreach( $product_nav_image_ids as $product_nav_image_id ) :
                      $nav_image_url = wp_get_attachment_url( $product_nav_image_id ); ?&gt;
  
                      &lt;div class=&quot;the-slider-nav-slide&quot; style=&quot;background-image: url('&lt;?php echo $nav_image_url; ?&gt;');&quot;&gt;
                          &lt;img class=&quot;the-slider-nav-slide-image&quot; src=&quot;&lt;?php echo $nav_image_url; ?&gt;&quot; alt=&quot;Product navigation image&quot; style=&quot;display: none;&quot;&gt;
                      &lt;/div&gt;
  
                  &lt;?php
                  endforeach; ?&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>To specify, I only require help making the smaller navigation slider that is absolutely positioned, to take up as much width as is required (1 slide = 80px image width + spacing from padding and margin | 2 slide = 2 x 80px image width + spacing), up to a maximum of 4 slides width. It must also never exceed 50% (624px) of the page contents width which is 1248px.</p>
  <p>This is what I presume to be a very similar issue to the flex issue with slick where the width of the element exponentially grows in width as a new slide is called. However, in this instance it is doing the opposite and is shrinking.</p>
  <p>This has me stumped and no existing articles and questions amongst this community and other similar questions solutions do not work.</p>
  <p><em>EDIT</em>: Styles working if .slick is not ran image...</p>
  <p><a href="https://i.stack.imgur.com/FAmfV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FAmfV.png" alt="Slider styles working without .slick() running" /></a></p>
  <p><em>EDIT</em>: Adding .slick()</p>
  <pre><code>// PRODUCT AND SPOTLIGHT HERO SLIDER INIT
      var theSlider = $('#the-slider');
      if (theSlider.length) {
          theSlider.slick({
              dots: false,
              arrows: false,
              infinite: false,
              autoplay: false,
              autoplaySpeed: 5000,
              pauseOnHover: false,
              slidesToShow: 1,
              slidesToScroll: 1,
              swipeToSlide: true,
              fade: true,
              cssEase: 'linear',
              //asNavFor: theSliderNav
          });
      }
  
      var theSliderNav = $('#the-slider-nav');
      if (theSliderNav.length) {
          theSliderNav.slick({
              dots: false,
              arrows: true,
              infinite: false,
              autoplay: false,
              slidesToShow: 4,
              slidesToScroll: 1,
              cssEase: 'linear',
              focusOnSelect: false,
              //asNavFor: theSlider,
              responsive: [{
                  breakpoint: 420,
                  settings: {
                      slidesToShow: 3
                  }
              }]
          });
      }
  
      $('#the-slider-nav .slick-slide').on('click', function(){
          $('#the-slider').slick('slickGoTo', $(this).data('slickIndex'));
      });
  // END PRODUCT AND SPOTLIGHT HERO SLIDER INIT
  </code></pre>