Menu Close

Slick Slider Multiple Items With Example

Slick slider

Here we will see how to use a slick slider script to move multiple items with one click. Follow the below complete snippet to learn the slick slider with multiple image items.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style3.css"/>
    <title>Scroll Multiple Items</title>
</head>
<body>
<div class="main">
  <div class="slider slide-show">
    <div class="img-wish">
        <img src="img1.png" >
        </div>
    <div class="img-wish">
        <img src="img2.png" >
        </div>
    <div class="img-wish">
        <img src="img3.png" >
        </div>
    <div class="img-wish">
        <img src="img1.png" >
        </div>
    <div class="img-wish">
        <img src="img2.png" >
        </div>
    <div class="img-wish">
        <img src="img3.png" >
        </div>
  </div>
</div>
</body>  
    <script>
          $('.slide-show').slick({
   slidesToShow: 3,
   slidesToScroll: 3,
   arrows: true, 
   dots: true,
 });
    </script>
</html>
 

Create external stylesheet and add it to the above example

body{
    background:#ccc;
}
.main {
    width: 800px;
    display:block;
    margin:0 auto;
}
.img-wish{text-align: center !important;}
.img-wish img{width: 100%;} 

More examples from slick slider codepen – click here

Share

Posted in HTML, jQuery

You can also read...