Slick: Using rows: 2 and on responsive row: 1 doesn't work

[fourroses666]

I need to have 1 row when going responsive < 680 px and show 2 items per row.
Somehow that doesn't work.

I have made a JSFiddle;
https://jsfiddle.net/b5bqk68j/925/

(refresh when on < 680 px wide)

My Slick call;

$('.slider-4st').slick({
    dots: false,
    arrows: true,
    nextArrow: '<div class="next"><i>&raquo;</i></div>',
    prevArrow: '<div class="prev"><i>&laquo;</i></div>',
    infinite: false,
    speed: 300,
    slidesPerRow: 4,
    rows: 2,
    adaptiveHeight: true,
    //slidesToShow: 4,
    //slidesToScroll: 4,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesPerRow: 3
            }
        },
        {
            breakpoint: 680,
            settings: {
                rows: 1,
                slidesPerRow: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                rows: 1,
                slidesPerRow: 1
            }
        }
    ]
});

[fourroses666]

Anyone an idea how to fix this?

[claudiuTicu]

I have a similar issue:
I'm trying to display 4 images on two rows starting from mobile.

Something like:
1 2
3 4

Please see this example:
https://codepen.io/Cllawz/pen/LezRNB

the slick call:
$('.slick-wrapper').slick({ infinite: false, mobileFirst: true, slidesToShow: 1, slidesToScroll: 1, arrows: true, rows: 2, slidesPerRow: 2, responsive: [{ breakpoint: '1024', settings: { slidesToShow: 4, rows: 1, slidesPerRow: 1 } }] });

Please let me know if there is any way to fix this.
Thank you,

[x35a]

Try to use slick 1.8.1 and slick.js file. Its important cause slick.min.js is broken in 1.8.1

[jeffmagill]

I just want to confirm that @rosivanov 's suggestion to use the un-minified 1.8.1 resolved the issue for me. Thanks.

[Bobyo]

So with Slick 1.8.1 fixed on the un-minified version still you can't do rows on responsive. One workaround is to have the mobileFirst: true on the initial settings and add the row settings there, then have a separate option on the responsive for 1024 where you default back.
@claudiuTicu 's example is the way to do it.

[sharathdaniel]

Still facing this issue, sad to see the plugin isn't maintained anymore.

[mircoraffinetti]

As suggested from @rosivanov with .js version is ok.
You can minify the .js version and use it.

[AntonGrekov]

Had same problem. rows: 1 along with slidesperRow: 2 had strange effect on slides
Just switching to unmified version of slick.js resolved issue

[Mobashir1995]

I just want to confirm that @x35a https://github.com/kenwheeler/slick/issues/3277#issuecomment-357706063 is working fine. The same fix also applies works for 1.8.0.
you are really a great person. Thanks a lot