Slick: Rows, slidesPerRow

Created on 17 Apr 2015  路  13Comments  路  Source: kenwheeler/slick

Hi,

Thank you for the plugin. It's really-really good, this is my first prior slider.
I try to use the rows option, but something wrong.
What I need: in desktop version 3 row with 4-4 images, in mobile version 1 row with all images sliding image-by-image. I have 24 images. The desktop is good (3 row x 4 images x 2 pages), but in mobile I see 2 images (not 1), and just 2 dots instead of (1 row x 1 image x 24 pages).
Here is my current code. Maybe you will see what is the problem. Maybe I need to add some extra css?

HTML:

<div id="slick1">
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,1" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,2" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,3" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,4" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,5" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,6" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,7" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,8" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,9" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,10" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,11" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,12" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,13" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,14" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1nd Row,15" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,16" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,17" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,18" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,19" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,20" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,21" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row,22" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row,23" alt="" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1nd Row,24" alt="" />
    </div>
</div>

JS:

$('#slick1').slick({
    rows: 3,
            dots: true,
            arrows: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesPerRow: 3,
                        rows: 3,
                        slidesToScroll: 1,
                        slidesToShow: 1,
                        dots: true
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        rows: 1,
                        slidesPerRow: 1,
                        slidesToScroll: 1,
                        slidesToShow: 1,
                        dots: true
                    }
                }
            ]
});

CSS:

.slick-slide img {
    width: 100%;
    height: auto;
    padding: 0 10px;
    margin-bottom: 20px;
}

Thanks

picture levipadre

Most helpful comment

@levipadre Hello, I think it is very easy to work with a browser width check. Something like this:

var width = window.innerWidth || document.body.clientWidth;
var $slick = $('#slick1');

// destroy slick if you are using smart resize
// smartresize url: https://gist.github.com/Pushplaybang/3341936
// $slick.slick('unslick');

if(width < 480) {
     $slick.slick({
            dots: true,
            arrows: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            slidesToScroll: 1,
     });
} else {
      $slick.slick({
            rows: 3,
            dots: true,
            arrows: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
     });
)

This works for me every time!

picture Anzka on 10 Aug 2016
👍6

All 13 comments

JS Fiddle, please, mate :)
https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown

simeydotme picture simeydotme on 17 Apr 2015

Sorry, you are absolutely right.
Here it is: https://jsfiddle.net/en593gyd/14/

levipadre picture levipadre on 17 Apr 2015

Below 480px I got 2 rows instead of 1. Do you know what's wrong?

levipadre picture levipadre on 19 Apr 2015

no idea, but i see the bug.
You should usee this fiddle, though:
https://jsfiddle.net/en593gyd/15/

No need for your extra stuff, makes it harder to test.

simeydotme picture simeydotme on 19 Apr 2015

Can you fix it?
I tried to figured it out what is the problem, so I used the not minified js version. I saw 2 tweaks:

Slick.prototype.buildRows = function() {

        var _ = this, a, b, c, newSlides, numOfSlides, originalSlides,slidesPerSection;

        newSlides = document.createDocumentFragment();
        originalSlides = _.$slider.children();

        if(_.options.rows > 1) { // because of this row newer gonna happens, should be >= 1
            slidesPerSection = _.options.slidesPerRow * _.options.rows;

            console.log('Original slides:' + originalSlides.length); // I got 8 instead of 24, this is the number of my slides
            numOfSlides = Math.ceil(
                originalSlides.length / slidesPerSection
            );

            for(a = 0; a < numOfSlides; a++){
                var slide = document.createElement('div');
                for(b = 0; b < _.options.rows; b++) {
                    var row = document.createElement('div');
                    for(c = 0; c < _.options.slidesPerRow; c++) {
                        var target = (a * slidesPerSection + ((b * _.options.slidesPerRow) + c));
                        if (originalSlides.get(target)) {
                            row.appendChild(originalSlides.get(target));
                        }
                    }
                    slide.appendChild(row);
                }
                newSlides.appendChild(slide);
            };
            _.$slider.html(newSlides);
            _.$slider.children().children().children()
                .width((100 / _.options.slidesPerRow) + "%")
                .css({'display': 'inline-block'});
        };

    };

After I lost a bit.
https://jsfiddle.net/en593gyd/16/

levipadre picture levipadre on 19 Apr 2015

@levipadre make both if(_.options.rows > 1) in Slick.prototype.buildRows and Slick.prototype.cleanUpRows if(_.options.rows >= 1)

that works for me

jacknotblack picture jacknotblack on 19 Dec 2015

@jacknotblack It works great for sliders with row >=2, but it crashes another sliders with 1 row. Can your show me your modified slick.js ?

Splintex picture Splintex on 13 Feb 2016

Hi @levipadre, @Splintex,
Indeed the fix @levipadre suggested is indeed the right fix. I changed it like levipadre suggested and my sliders with one row do not crash. I use them both.

Please open this issue @kenwheeler? I could not get my 2 x 2 grid to work with responsive options for 1x1 and 2 x 1.

basepack picture basepack on 14 Apr 2016

@levipadre Hello, I think it is very easy to work with a browser width check. Something like this:

var width = window.innerWidth || document.body.clientWidth;
var $slick = $('#slick1');

// destroy slick if you are using smart resize
// smartresize url: https://gist.github.com/Pushplaybang/3341936
// $slick.slick('unslick');

if(width < 480) {
     $slick.slick({
            dots: true,
            arrows: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            slidesToScroll: 1,
     });
} else {
      $slick.slick({
            rows: 3,
            dots: true,
            arrows: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
     });
)

This works for me every time!

Anzka picture Anzka on 10 Aug 2016
👍6

@Anzka Thanks, this works for me.

Mrhedges picture Mrhedges on 16 Feb 2017

hi all! look like i found temporary solution for this issue
`Slick.prototype.buildRows = function() {

var _ = this, a, b, c, newSlides, numOfSlides, originalSlides,slidesPerSection;
newSlides = document.createDocumentFragment();
//originalSlides =  _.$slider.children();
var ch = _.$slider.children();
while (ch.hasClass('slick-row-slide') || ch.hasClass('slick-row')  ) {
    debugger;
    ch = ch.children();
}
originalSlides = ch;
//if(_.options.rows > 1) {

    slidesPerSection = _.options.slidesPerRow * _.options.rows;
    numOfSlides = Math.ceil(
        originalSlides.length / slidesPerSection
        );


    for(a = 0; a < numOfSlides; a++){
        var slide = document.createElement('div');
        slide.className = 'slick-row-slide';
        for(b = 0; b < _.options.rows; b++) {
            var row = document.createElement('div');
            row.className = 'slick-row';
            for(c = 0; c < _.options.slidesPerRow; c++) {
                var target = (a * slidesPerSection + ((b * _.options.slidesPerRow) + c));
                if (originalSlides.get(target)) {
                    row.appendChild(originalSlides.get(target));
                }
            }
            slide.appendChild(row);
        }
        newSlides.appendChild(slide);
    }

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

//}
};`

AlexyOd picture AlexyOd on 8 Apr 2017

@simeydotme Why did you close this issue? I can't find any fix for this issue.

zheoreh picture zheoreh on 25 May 2017
👍3

Hi, fellows!
At the end of the day, how was this fixed?
I was checking the last version(1.8.0) and the suggested changes by @jacknotblack

make both if(.options.rows > 1) in Slick.prototype.buildRows and Slick.prototype.cleanUpRows if(.options.rows >= 1)

are not there.

Nevitones picture Nevitones on 20 Sep 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hoghamburg picture hoghamburg  路  3Comments
k-lusine picture k-lusine  路  3Comments
REPTILEHAUS picture REPTILEHAUS  路  3Comments
rahi-rajeev picture rahi-rajeev  路  3Comments
xtatanx picture xtatanx  路  3Comments