Responsive Image Carousel Tutorial with jQuery and Slick Slider

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