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:

  1. <head>
  2.     <title></title>
  3.  
  4.     <meta charset = "UTF-8">
  5.  
  6.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
  7.  
  8.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
  9.  
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  11.  
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  13.  
  14.     <style type="text/css">
  15.  
  16.     .container{
  17.         width: 70%;
  18.         margin:0 auto;
  19.         padding: 35px;
  20.     }
  21.  
  22.     .container .slick-next:before,
  23.     .container .slick-prev:before{
  24.         color:#cacaca;
  25.         font-size: 30px;
  26.     }
  27.  
  28.     .slick-slide{
  29.         text-align: center;
  30.     }
  31.  
  32.     .slick-slide img{
  33.         max-width: 472px;
  34.         margin: auto;
  35.         box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  36.     }
  37.  
  38.     </style>
  39.  
  40.  
  41.     <script type="text/javascript">
  42.  
  43.     $(document).ready(function(){
  44.         $('.slides').slick({
  45.             speed: 300,
  46.             autoplay:true,
  47.             dots:true,
  48.             slidesToShow:2,
  49.             slidesToScroll:1,
  50.             responsive: [
  51.             {
  52.                 breakpoint: 1024,
  53.                 settings: {
  54.                     slidesToShow: 1,
  55.                     slidesToScroll: 1,
  56.                 }
  57.             }
  58.             ]
  59.         })
  60.     });
  61.  
  62.     </script>
  63.  
  64. </head>
  65. <body>
  66.  
  67. <div class='container'>
  68.   <div class='slides'>
  69.     <img src="image-a.jpg">
  70.     <img src="image-b.jpg">
  71.     <img src="image-c.jpg">
  72.     <img src="image-d.jpg">
  73.     <img src="image-e.jpg">
  74.     <img src="image-f.jpg">
  75.     <img src="image-g.jpg">
  76.     <img src="image-h.jpg">
  77.     <img src="image-i.jpg">
  78.     <img src="image-j.jpg">
  79.   </div>
  80. </div>
  81.  
  82. </body>

Leave a Reply

Your email address will not be published. Required fields are marked *