<div class="slider slider--fade">
<ul>
<li class="slider__item"><img src="https://picsum.photos/id/1/1000/500"></li>
<li class="slider__item"><img src="https://picsum.photos/id/10/1000/500"></li>
<li class="slider__item"><img src="https://picsum.photos/id/348/1000/500"></li>
</ul>
</div>
<div>
<ul class="slider__btn mt-30">
<li><a href="#" class="slider__btn-item is-current">1</a></li>
<li><a href="#" class="slider__btn-item">2</a></li>
<li><a href="#" class="slider__btn-item">3</a></li>
</ul>
</div>
.slider > ul {
position: relative;
}
.slider__item {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.slider__item:not(.is-current) {
display: none;
}
.slider__item.is-current {
position: relative;
}
.slider__item > img {
width: 100%;
}
.slider__btn {
text-align: center;
}
.slider__btn > li {
display: inline-block;
}
.slider__btn-item {
text-indent: -9999px;
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: #333;
}
.slider__btn-item.is-current {
background: #555;
}
.slider {
& > ul {
position: relative;
}
&__item {
position: absolute;
width: 100%;
top: 0;
left: 0;
&:not(.is-current ) {
display: none;
}
&.is-current {
position: relative;
}
& > img {
width: 100%;
}
}
&__btn {
text-align: center;
& > li {
display: inline-block;
}
&-item {
text-indent: -9999px;
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: $color_main;
&.is-current {
background: $color_sub;
}
}
}
}
(function() {
const slides = document.querySelectorAll('.slider--fade .slider__item');
if(!slides.length) {return;}
const count = slides.length;
const btns = document.querySelectorAll('.slider__btn-item');
let current = 0;
let next = 1;
const interval = 3000;
const duration = 500;
let timer;
slides[current].classList.add('is-current');
timer = setInterval(slideTimer, interval);
btns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
next = e.target.textContent - 1;
clearInterval(timer);
timer = setInterval(slideTimer, interval);
slideTimer();
});
});
function slideTimer() {
let currentSlide = slides[current];
let nextSlide = slides[next];
// 現在の画像を非表示
currentSlide.style.transition = 'opacity ' + duration + 'ms';
currentSlide.style.opacity = 0;
// 次の画像を表示
nextSlide.style.transition = 'opacity ' + duration + 'ms';
nextSlide.style.display = 'block';
nextSlide.style.opacity = 0;
setTimeout(() => {
nextSlide.style.opacity = 1;
});
// ボタンの現在表示を変更
btns.forEach(btn => {
btn.classList.remove('is-current');
if(btn.textContent == next + 1) {
btn.classList.add('is-current');
}
});
// 切り替えが完了した後の処理
setTimeout(() => {
currentSlide.style.transition = '';
currentSlide.style.opacity = '';
currentSlide.classList.remove('is-current');
nextSlide.classList.add('is-current');
nextSlide.style.transition = '';
nextSlide.style.opacity = '';
nextSlide.style.display = '';
}, duration);
current = next;
next = ++next;
if(next > count - 1) {
next = 0;
}
}
}());