Slick Slider responsive number of products per slide
<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>