This Video is going to show you How to Create an Easy and Responsive Image Carousel Tutorial with jQuery and Slick Slider
The code:
-
-
-
-
- <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>
-
