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

The code:

< View plain text >
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.  
  11.  
  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.    
  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.    
  63.  
  64. </head>
  65. <body>
  66.  
  68.  
  69.    
  70.    
  71.    
  72.    
  73.    
  74.    
  75.    
  76.    
  77.    
  78.    
  79.  
  • </div>
  •  
  • </body>