Responsive Image Carousel Tutorial with jQuery and Slick Slider
Categories: Javascript, Web Development1 min read

This Video is going to show you How to Create an Easy and Responsive Image Carousel Tutorial with jQuery and Slick Slider

The code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style type="text/css">
.container{
    width: 70%;
    margin:0 auto;
    padding: 35px;
}
 .container .slick-next:before,.container .slick-prev:before{
    color:#cacaca;
    font-size: 30px;
}
 .slick-slide{
    text-align: center;
}
 .slick-slide img{
    max-width: 472px;
    margin: auto;
    box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

</style>

<script type="text/javascript">

    $(document).ready(function(){
        $('.slides').slick({
            speed: 300,
            autoplay:true,
            dots:true,
            slidesToShow:2,
            slidesToScroll:1,
            responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }
            ]
        })
    });

    </script>

<div class="container">
<div class="slides"><img src="image-a.jpg" />
<img src="image-b.jpg" />
<img src="image-c.jpg" />
<img src="image-d.jpg" />
<img src="image-e.jpg" />
<img src="image-f.jpg" />
<img src="image-g.jpg" />
<img src="image-h.jpg" />
<img src="image-i.jpg" />
<img src="image-j.jpg" /></div>
</div>

 

Blazing fast CDN - keycdn
Up to 75% off Hosting - Hostinger
Namecheap coupon promo code