I would like to have two rows of images for a basic slider. I am using Slick Slider, but it doesnt seem to be working even though I am following their instructions. What am I doing wrong?

This is the link to Slick Slider JS website: /

My HTML:

<div class="carousel">
  <img src=".png">
  <img src=".png">
  <img src=".png">
  <img src=".png">
  <img src=".png">
  <img src=".png">
</div>

My JS:

$(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          slidesPerRow: 3,
          rows: 2,
          responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesPerRow: 2,
              rows: 1,
            }
          },
          {
            breakpoint: 640,
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          }
        ]
      });
    });

I have created a fiddle: /

I would like to have two rows of images for a basic slider. I am using Slick Slider, but it doesnt seem to be working even though I am following their instructions. What am I doing wrong?

This is the link to Slick Slider JS website: http://kenwheeler.github.io/slick/

My HTML:

<div class="carousel">
  <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
</div>

My JS:

$(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          slidesPerRow: 3,
          rows: 2,
          responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesPerRow: 2,
              rows: 1,
            }
          },
          {
            breakpoint: 640,
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          }
        ]
      });
    });

I have created a fiddle: https://jsfiddle/zts1nok8/

• javascript
• jquery
• html
• css
• slick.js

5 Answers 5

If you are using slick slider version 1.8.1 and using slick.min.js file then replace the file with slick.js file only because slick.min.js has some broken code.
This works for me

I think you can achieve the effect you want by wrapping your images and using some simple CSS.

HTML:

<div class="carousel">
  <div class="carouselItem">
    <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  </div>
  <div class="carouselItem">
    <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot/hub/482618/hubfs/demo-logo.png">
  </div>
</div>

CSS:

.carouselItem{
  width:100%;
  text-align:center;
}
.carouselItem img{
  display:inline-block;

}

If you do this you will probably want to remove all that stuff about rows in the slick config. That appears to be bugged to be honest. You could possibly send an issue to the developer.

For responsivity, you could possibly do something with CSS media queries and hiding/showing the right images. This would work best if you are just using the same image three times per slide.

See JSFiddle here: https://jsfiddle/Chipmo/0u8g9aLt/2/

It's actually working but you have to set it correctly.

Please change the

slidesPerRow: 1

and try again.

please try changing

slidesPerRow:3

to

slidesToShow:3

and add

slidesToScroll:3

I was able to e up with a solution for this, incase anyone faces similar issue in the future:

.item img {
  float: left;
  width: 33%;
}


$(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          slidesPerRow: 1,
          rows: 2,
          responsive: [
          {
            breakpoint: 1024,   
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          },
          {
            breakpoint: 640,
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          }
        ]
      });
    });

https://jsfiddle/c5ak1hxz/1/