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 increase the amount of slides as we breakdown in screen size.
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).
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.
The other way would be to run a server request on resize to write the data (not positive on how demanding this could get).
I put a JSFiddle together to show what the end result would generally look like for each viewport.
<div class="slider">
<ul class="fullslider">
<!-- Start Slide One -->
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<!-- End Slide One on Mobile -->
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<!-- End Slide One on Tablet -->
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<!-- End Slide One on Desktop -->
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
<div class="single-product"><img src="http://placekitten.com/400/400"></div>
</ul>
</div>