Slick.js customPaging

by kazuya nakagawa

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/destyle.min.css">

<!-- 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/815297.jpg" alt="image1"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/dgshmxbqpn0.jpg" alt="image2"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/7884473.jpg" alt="image3"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/kzf-dpqilrs.jpg" alt="image4"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/174276.jpg" alt="image5"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1681485.jpg" alt="image6"></div>
</div>

CSS

.slider img {
  width: 100%;
  height: auto;
}
.thum-paging {
  margin-top: 10px;
   display:grid;
   grid-template-columns: repeat(6,1fr);
   gap:5px;
}
.thum-paging li{
  opacity: 0.7;
  transition:0.2s;

  
}
.thum-paging li img{
  object-fit: cover;
  width: 100%;
  height: 80px;
}
.thum-paging li.slick-active{
  opacity: 1;
}

JavaScript

$('.slider').slick({
  autoplay:true,
　　 dotsClass:'thum-paging',
  dots:true,
  adaptiveHeight: true,
  customPaging: function(slider, i) {
    var thumb = $(slider.$slides[i]).find('img').attr('src');
    return '<img src="' + thumb + '">';
  }
});