Editing Row amounts for responsive

[Fionah]

I have been using slick slider a lot and I love it! I am having an issue with the rows for my responsive settings. I want two rows for desktop which then goes to one row for a smaller screen, the responsive settings recognizes the changes to slide amounts but not rows. The code I have used is below, can you tell me where I am going wrong:

            $('.ptype-slick').slick({
                infinite: true,
                arrows: false,
                rows: 1,
                slidesToShow: 1,
                mobileFirst: true,
                responsive: [
                    {
                        breakpoint: 360,
                        settings: {
                            slidesToShow: 2,
                        }
                    },
                    {
                        breakpoint: 450,
                        settings: {
                            slidesToShow: 3,
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 4,
                        }
                    },
                    {
                        breakpoint: 700,
                        settings: {
                             rows: 2,
                            slidesPerRow: 5,
            }
        }
                ]
            });

Many thanks in advcance! Fiona

[lukasz-virtualo]

Same thing with going with the responsive things in the reverse (large desktop as the default and then smaller screens later on):

{
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
    arrows: false,
    dots: false,
    infinite: true,
    speed: 300,
    cssEase: 'linear',
    rows: 2,
    slidesPerRow: 6,
    responsive: [
        { breakpoint: 1024, settings: {
            rows: 1,
            slidesToShow: 5,
            slidesToScroll: 5
        }},
        { breakpoint: 640, settings: {
            rows: 1,
            slidesToShow: 4,
            slidesToScroll: 4
        }}
    ]
}

Upon resize to the smaller screen I get a very small grid of 6 on 2 elements occupying perhaps a 20% of the available area in the container. Using a single row for all resolutions works OK.

[Lysande]

I'm currently having the exact same problem, both with and without mobileFirst enabled.

The row count specified in the main settings are the ones that stick, any rows specified on a breakpoint are ignored. It appears that slidesPerRow are also ignored.

[AlexeyKarash]

+1 have same problem now.

[hakastein]

+1 same bug

[kenwheeler]

Can someone please jsfiddle this

[hakastein]

https://jsfiddle.net/gdqwn1je/2/ rows don't change on resize https://jsfiddle.net/gdqwn1je/3/ rows disappear on resize

[kenwheeler]

Thanks for confirming

[robertpustulka]

Same here. When can we except this to be fixed?

[danielkoch]

Same issue here. The PR does not fix the problem for me.

[Asinox]

Same here

[pankajchopra09]

Recently, I also got into this situation, however I did it with an alternate way until there is no permanent fix for this. I hope this will help someone else also.

var viewportWidth = $(window).width();
if( viewportWidth > 667 ){
    var Rows = 2;
    var Slides = 3;
} else if( viewportWidth > 480 ){
    var Rows = 1;
    var Slides = 2;
}

$(".regular").slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 8000,
    infinite: true,
    slidesToShow: Slides,
    slidesToScroll: Slides,
    rows: Rows,

});

Thanks

[pochol]

I found some core fix. Works for me.

http://stackoverflow.com/questions/35702923/slick-show-2-row-6-items-on-desktop-and-1-row-1-item-on-mobile

So, find these two methods in slick.js:

Slick.prototype.buildRows = function() { ... } Slick.prototype.cleanUpRows = function() { ... } and change the if condition from if(.options.rows > 1) to if(.options.rows > 0)

[anythinggraphic]

@akrawchyk Thank you SO much. Totally works.

[akrawchyk]

@anythinggraphic I believe credit goes to @pochol for the find 😉

[anythinggraphic]

HA, yes! Thanks for that lol. ^^ @pochol :-)

[kenwheeler]

@pochol can you PR this fix?

[akrawchyk]

@kenwheeler it was a simple change according to @pochol so I went ahead and PR'd it.

[D-Houghton]

@pochol - thank you so much!

[sarbjit399]

Thanks worked for me!

[arvinsim]

I have the same problem right now but it seems that the PR fix isn't still merged yet.

[danjaywing]

Any movement on this? I'm pulling the plugin through node so I don't have the option available to edit core.

EDIT

I gave the above a go out of curiosity, it messes up sliders that don't have rows set. So I wouldn't recommend if you have various sliders doing different things.

This needs resolving however as in my case I need to be able to go from no rows to any number of rows at any breakpoint. As it stands, if I try to do this, the content of the slides is either removed or replaced with br tags.

[ghost]

Confirming @danjaywing - the fix messes up single row sliders.

[Pothecary]

+1 Having the same issue as @danjaywing

[alexandraleigh]

+1 Has there been any recent movement on this? This would be a great feature to have.

[BhaveshSGupta]

As of #3001, we should close this issue, code is already merged into the master branch

[mqanneh]

Thanks @pochol, it worked for me as well :+1: https://github.com/kenwheeler/slick/issues/1871#issuecomment-241985120

[SimplySayHi]

@pochol solution is great, but in this way if you have a slider with one row it will cause each slide to be set to display: inline-block ( this causes to have an extra space below the slide ).

So, in addition to @pochol solution I put a control at line 585 ( I refer to slick version 1.8.1 ) around this piece of code:

_.$slider.children().children().children()
    .css({
        'width':(100 / _.options.slidesPerRow) + '%',
        'display': 'inline-block'
    });

and it becomes this:

if(_.options.rows > 1) {
    _.$slider.children().children().children()
        .css({
            'width':(100 / _.options.slidesPerRow) + '%',
            'display': 'inline-block'
        });
}

for me it worked fine :)

[alexandrethorr]

@pochol solution is great if you have only one slider on the page, but if you have several sliders on the page (home page for example) it will break slider without rows options.

Here is another solution , with @pochol idea : add an option on your slider : activateRows = true;

Slick.prototype.buildRows = function() { ... } Slick.prototype.cleanUpRows = function() { ... } and change the if condition from if(.options.rows > 1) to if(.options.rows > 1 || _.options.activateRows)