Slick Slider Example

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div  class="cs-multi-item-slider" >
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image1.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image2.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image3.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image4.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image5.jpg">
    </div>  
</div>

<script>

$(document).ready(function(){
        $('.cs-multi-item-slider').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 1,
            lazyLoad: 'ondemand',
            autoplay: true,
            autoplaySpeed: 2000,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        });
    });
    </script>

Leave a Comment