title: Slick Slider responsive number of products per slide
body: <p>My question is on the most effective way to show a number of products per slide and then as the responsive breakpoints come, the columns reduce AND the products per slide reduce as well. This would then <em>increase</em> the amount of slides as we breakdown in screen size.</p>
  
  <p>So if we start with 2 rows of 4 (8 products per slide), then on mid size we show 2 columns with 3 (6 products per slide) and then on mobile, 2 columns with 2 products a slide (4 total). </p>
  
  <p>We can write some JS to run on resize and strip out the slide wrappers and re-assign the wrappers to get the results we want.</p>
  
  <p>The other way would be to run a server request on resize to write the data (not positive on how demanding this could get).</p>
  
  <p>I put a <a href="https://jsfiddle.net/ttcyvn3d/2/" rel="nofollow">JSFiddle</a> together to show what the end result would generally look like for each viewport. </p>
  
  <pre><code>  &lt;div class="slider"&gt;
      &lt;ul class="fullslider"&gt;
          &lt;!-- Start Slide One --&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;!-- End Slide One on Mobile --&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;!-- End Slide One on Tablet --&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;!-- End Slide One on Desktop --&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
          &lt;div class="single-product"&gt;&lt;img src="http://placekitten.com/400/400"&gt;&lt;/div&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>