3

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>
2
  • Are you aware of the Responsive Display setting? You can see examples about it in the doc. If you have any question about it or if I didn't understand correctly your question, let me know.
    – actaram
    Jul 12, 2016 at 12:13
  • Thank for your help, yes I am aware of the slick options. I think I may have not explained it as clear. The slide breakdown isn't the actual issue. It's the content per slide that is the issue. So on desktop we have 8 (2 rows) products and then on mobile we show 4 (2 rows) per slide. We are always showing 1 slide, its the number of products per slide that changes and that is the troubled spot. Jul 12, 2016 at 17:29

1 Answer 1

12

The most effective and cleanest way to do what I think you're trying to achieve is to use the responsive setting of the slick carousel. It's far easier to use a setting offered by the plugin itself than to try do it manually in the resize event or to do it on the server side. This is how you'd use this setting:

$(".fullslider").slick({
    slidesToShow: 4, // default desktop values
    slidesToScroll: 4,
    rows: 2,
    dots: true,
    arrows: true,
    responsive: [
        {
            breakpoint: 980, // tablet breakpoint
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },
        {
            breakpoint: 480, // mobile breakpoint
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }
    ]
});

The breakpoints represent the number of pixels at which point you'd want to change some settings. In your case, you want to change the number of slides to show and to scroll when the user is viewing from a tablet or a phone. But you don't want to change the other settings, like rows for instance, so don't set it in the breakpoint's settings; it will remain 2.

JSFiddle example

3
  • 1
    Oh wow I hadn't realized there was a rows: option! This is awesome. Thanks tremendously!! Jul 13, 2016 at 17:44
  • This is exactly what I needed. I customized it to suit my needs but this is perfect Apr 20, 2020 at 21:44
  • Thanks! Sadly it doesn't work when using it with breakpoints.
    – moghwan
    Mar 29, 2022 at 18:43

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.