Menu Close

How To Add Data Attribute Settings On Slick Slider Carousel

Data attribute

Here, we will see how to change data settings using data attributes on slick slider html layout. Add this data attribute to the image div element.

data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'  

Follow the complete code with an example.

HTML:

<!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="style.css"/>
    <title>Data Attribute Settings</title>
</head>
<body>
<div class="main">
  <div class="slider slide-show" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
    <div class="img-wish">
        <img src="s1.png" >
        </div>
    <div class="img-wish">
        <img src="s2.png" >
        </div>
    <div class="img-wish">
        <img src="s3.png" >
        </div>
    <div class="img-wish">
        <img src="s4.png" >
        </div>
    <div class="img-wish">
        <img src="s5.png" >
        </div>
    <div class="img-wish">
        <img src="s6.png" >
        </div>
  </div>
</div>
</body>  
    <script>
          $('.slide-show').slick({
   arrows: true, 
   dots: true,
 });
    </script>
</html>
 

CSS:

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;
    margin: 20px;
}
.img-wish img {
    width: 100%;
} 

More examples for slick slider

Posted in HTML, JavaScript, jQuery

You can also read...