jQuery slick slider with multiple rows not working

Issue

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.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/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.net/zts1nok8/

Solution

I was able to come 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.net/c5ak1hxz/1/

Answered By - zestzahir