Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by abhishek kirar

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->

<section class="slider">
    <div><img data-lazy="http://dev.pixisandbox.com/yoshion/wp-content/uploads/product-images/1523-157-300x300.jpg"></div>
    <div><img data-lazy="http://dev.pixisandbox.com/yoshion/wp-content/uploads/product-images/1523-178-300x300.jpg"></div>
    <div><img data-lazy="http://dev.pixisandbox.com/yoshion/wp-content/uploads/product-images/1523-502-300x300.jpg"></div>
    <div><img data-lazy="http://dev.pixisandbox.com/yoshion/wp-content/uploads/product-images/1523-509-300x300.jpg"></div>
    <div><img data-lazy="http://dev.pixisandbox.com/yoshion/wp-content/uploads/product-images/1524-1528-053-300x300.jpg"></div>
    <div><img data-lazy="http://dev.pixisandbox.com/yoshion/wp-content/uploads/product-images/1524-094-300x300.jpg"></div>
</section>

SCSS

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}
.slick-slide img{
  margin: 0 auto;
  width:100%;
  height:auto;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

JavaScript

/**

    This fiddle is using the latest version 
    of Slick (from master) and jQuery.

    If your is	sue occurs in older version or a 
    specific tag; please use the "External Resources" 
    section in the sidebar to correct it.

**/
    $(".slider").slick({
        lazyLoad: 'ondemand',
				slidesToShow: 1,
				slidesToScroll: 1,
        mobileFirst: true,
        responsive: [        
        {
            breakpoint: 1400,
            settings: {
                slidesToShow: 6,
                slidesToScroll: 6,
            }
        }, {
            breakpoint: 900,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }]
    });