Slick.js adaptiveHeight

by kazuya nakagawa

HTML

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- slick.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">



<div class="slider">
  
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/5uucs4p0y3q.jpg" ></div>
   <div><img src="https://marucu.com/wp-content/uploads/2023/04/815297.jpg" ></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/j9tdzafxigy.jpg"></div>
   <div><img src="https://marucu.com/wp-content/uploads/2023/04/7884473.jpg"></div>
</div>

CSS

.slider{
  width: 50%;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
}

JavaScript

$('.slider').slick({
  autoplay:true,
  dots:true,
  adaptiveHeight: true,
});