Menu Close

Adaptive Height In Slick Slider

slider

Here, we will see how to set slides in even height automatically by using adaptive height settings in slick slider.

Follow the complete code with an example.

<!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>Adaptive Height</title>
</head>
<body>
<div class="main">
  <div class="slider slide-show">
    <div class="img-wish">
        <img src="s1.png" >
        </div>
    <div class="img-wish">
        <img src="s2.png" >
        <p>Hello!</p>
        </div>
    <div class="img-wish">
        <img src="s3.png" >
        </div>
    <div class="img-wish">
        <img src="s4.png" >        
        <p>Hooray!</p>        
        <p>Hello World!</p>
        </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({  
              dots: true,
              infinite: true,
              speed: 300,
              slidesToShow: 1,
              adaptiveHeight: true
            });
    </script>
</html>
 

Create external stylesheet and add it to the above example

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

More examples from slick slider codepen – click here

Share

Posted in HTML, jQuery

You can also read...