Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rows, slidesPerRow

See original GitHub issue

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

Issue Analytics

State:
Created 8 years ago
Comments:13

Top GitHub Comments

6reactions

Anzkacommented, Aug 10, 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!

3reactions

zheorehcommented, May 25, 2017

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

Top Results From Across the Web

Slick.js - Change "rows" & "slidesPerRow" on the fly does not ...

Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....

Slick Slider two rows, how? - Stack Overflow

You can use slidesPerRow and rows check the below code. $('.carousel').slick({ dots: true, /*rows: 2, slidesPerRow: 3,*/ prevArrow: "<i ...

Multiple Rows - React Slick Documentation - neostack

... centerMode: true, infinite: true, centerPadding: "60px", slidesToShow: 3, speed: 500, rows: 2, slidesPerRow: 2 }; return ( <div> <h2>Multiple Rows</h2> ...

Slides Per Row - LibreOffice Help

Slides Per Row. Enter the number of slides to display on each row in the Slide Sorter. Please support us! Impressum (Legal Info)...

Q&A: An Analysis of the Brazilian Presidential Election

... ,"focusOnSelect":false,"infinite":true,"initialSlide":0,"lazyLoad":"ondemand","mouseWheel":false,"randomize":false,"rtl":false,"rows":1,"slidesPerRow":1 ...