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.  
  11.  
  12.     <style type="text/css">
  13.  
  14.     .container{
  15.         width: 70%;
  16.         margin:0 auto;
  17.         padding: 35px;
  18.     }
  19.  
  20.     .container .slick-next:before,
  21.     .container .slick-prev:before{
  22.         color:#cacaca;
  23.         font-size: 30px;
  24.     }
  25.  
  26.     .slick-slide{
  27.         text-align: center;
  28.     }
  29.  
  30.     .slick-slide img{
  31.         max-width: 472px;
  32.         margin: auto;
  33.         box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  34.     }
  35.  
  36.     </style>
  37.  
  38.  
  39.    
  40.  
  41.     $(document).ready(function(){
  42.         $('.slides').slick({
  43.             speed: 300,
  44.             autoplay:true,
  45.             dots:true,
  46.             slidesToShow:2,
  47.             slidesToScroll:1,
  48.             responsive: [
  49.             {
  50.                 breakpoint: 1024,
  51.                 settings: {
  52.                     slidesToShow: 1,
  53.                     slidesToScroll: 1,
  54.                 }
  55.             }
  56.             ]
  57.         })
  58.     });
  59.  
  60.    
  61.  
  62. </head>
  63. <body>
  64.  
  65.  
  66.    
  67.    
  68.    
  69.    
  70.    
  71.    
  72.    
  73.    
  74.    
  75.    
  76.  
  • </div>
  •  
  • </body>