mySlick

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/1072821.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/2215317.jpg" alt="image4"></div>
</div>

<div class="control-area">
<p class="count-num"><span class="current"></span>/<span class="total"></span></p>
  
</div>

SCSS

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

.dots-bar {
  width: 100%;
  margin: 0;
  padding: 0 30px;
  text-align: center;
  list-style: none;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  
  
  li {
    margin: 0 2px;
  }
  
  button {
    position: relative;
    width: 100%;
    height: 2px;
    border: 0;
    background-color: #eee;
    font-size: 0;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
     
      display: block;
      width: 0%;
      height: 100%;
    }
  }
  
  .slick-active {
    button:after {
      background-color: #000;
      animation: progress 3.4s linear forwards;
    }
  }
  .slick-active-first {
    button:after {
      background-color: #000;
      animation: progress 3s linear forwards!important;
    }
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}


.slick-dotted.slick-slider {
    margin-bottom: 10px!important;
}

.control-area{
  display:flex;
  justify-content:center;
  align-items: center;
}
.count-num{
  font-family: Georgia, serif;
  font-size: 26px;
  margin: 0 1em;
  width: 3em;
  text-align:center;
  .total{
    font-size: 18px;
  }
}

JavaScript

$(document).ready(function () {

$('.slider').on('init', function(event, slick) {
	//最初のスライドだけ時間が短いため、CSSアニメーションも短くする
  $('.dots-bar li:first-child').addClass('slick-active-first');
  //スライドの総数と現在のスライド(初期値)をセット
  let totalSlides = slick.slideCount;
  $('.total').text(totalSlides); 
  $('.current').text(1);
});

//最初のCSSアニメーション（短縮)を解除
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  if (nextSlide === 1) {
    $('.dots-bar li:first-child').removeClass('slick-active-first');
  }
});

$('.slider').slick({
  fade:true,
　　　　autoplay: true,
  autoplaySpeed: 3000,
  speed:400,
  pauseOnFocus:false,
  pauseOnHover:false,
  dots:true,
  dotsClass: 'dots-bar',
  arrows: true,
  appendArrows: '.control-area',
  prevArrow: '<button class="prev"><</button>',
  nextArrow: '<button class="next">></button>'
 });

 
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  $('.current').text(nextSlide + 1);
});  

});