実務で、メインビジュアルにサムネイルとプログレスバー付きスライダーを実装しましたので、
忘備録も兼ねて共有いたします!
demo
http://mtrad-test.net/takemura/slider/index.html
目次
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
</head>
<body>
<div class="wrapper">
<div class="slide-wrap-image">
<div>
<!-- スライダー -->
<div class="swiper-container slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/img01.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img02.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img03.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img04.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img05.jpg" alt=""></div>
</div>
</div>
<!-- プログレスバー -->
<div class="progressbar"><span class="progressbar_in"></span></div>
</div>
</div>
<div class="slide-wrap-thum">
<div>
<!-- サムネイル -->
<div class="swiper-container slider-thumbnail">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/thum01.png" alt="">
</div>
<div class="swiper-slide">
<img src="./img/thum02.png" alt="">
</div>
<div class="swiper-slide">
<img src="./img/thum03.png" alt="">
</div>
<div class="swiper-slide">
<img src="./img/thum04.png" alt="">
</div>
<div class="swiper-slide">
<img src="./img/thum05.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- swiper読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="./base.js"></script>
</body>
</html>
SCSS
body{
margin: 0;
background-color: #f0a794;
}
.wrapper{
max-width: 1000px;
width: 90%;
margin: auto;
}
.slide-wrap-image{
width: 100%;
height: 100%;
position: relative;
.swiper-slide {
position: relative;
opacity: 0;
overflow: hidden;
&::after {
display: block;
content: '';
width: 100%;
height: 0;
padding-top: 55%;
}
img {
position: absolute;
left: 0;
top: 0;
object-fit: cover;
width: 100%;
height: 100%;
transform: scale(1.1);
transform-origin: center;
transition: all 5s cubic-bezier(0.1, 0.5, 0.5, 1);
}
}
.swiper-slide-visible,
.swiper-slide-duplicate-active {
opacity: 1;
img {
transform: scale(1);
}
}
.progressbar{
position: relative;
width: 100%;
height: 3px;
background: #ccc;
overflow: hidden;
span{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #f04c2f;
border-radius: 7px;
transform: scaleX(0);
transform-origin: left center;
transition-timing-function: linear;
}
}
}
.slide-wrap-thum{
margin: 20px auto 0;
overflow: hidden;
.swiper-slide-thumb-active{
opacity: 0.5;
}
.swiper-slide{
cursor: pointer;
img{
width: 100%;
}
}
}
JS
$(function(){
//サムネイル
var sliderThumbnail = new Swiper('.slider-thumbnail', {
slidesPerView: 5,
freeMode: true,
spaceBetween: 20,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: {
768: {
slidesPerView: 5,
},
},
});
// バー
var bar = document.querySelector('.progressbar_in');
var speed = 5000;
//スライダー
var slider = new Swiper('.slider', {
autoplay: {
delay: 5000,
disableOnInteraction: false
},
loop: true,
speed: 1000,
effect: 'fade',
loopAdditionalSlides: 1,
thumbs: {
swiper: sliderThumbnail
},
on: {
slideChangeTransitionStart: () => {
bar.style.transitionDuration = "0s";
bar.style.transform = "scaleX(0)";
},
slideChangeTransitionEnd: () => {
bar.style.transitionDuration = speed + 'ms',
bar.style.transform = "scaleX(1)";
},
},
});
});