slick carousel demo

by ian_smithz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.js"></script>
<script src="https://www.screwfix.com/20397/presentation-web-sitebuilder/js/browse.js"></script>
<div class="top-slider">

        <div class="banner-mg-wrap">

        <a href="#">
        <img data-src-small="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_sm.png" data-src-medium="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_md.png" data-src-large="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_lg.png" class="swap" data-alt="End of Catalogue Deals" src="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_lg.png"></a>

         
        </div>

        <div class="banner-mg-wrap">
            
        <a href="#">
        <img data-src-small="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_sm.png" data-src-medium="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_md.png" data-src-large="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_lg.png" class="swap" data-alt="End of Catalogue Deals" src="http://www.screwfix.com/images/CAT129/assets/gfx/hp_eocdcat129_lg.png"></a>
           
        </div>
        
    </div>

CSS

.top-slider {
    max-width: 1248px;
    margin: auto;
}

.top-slider img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
        $('.top-slider').slick({
            slidesToShow: 1,
            slidesToScroll: 2,
            autoplay: true,
            autoplaySpeed: 6000
        });
    });