今回の記事では、swiper.jsやslick.jsのような外部ライブラリを使わずに、純粋なHTML、CSS、JavaScriptのみを使用して画像スライダーを作成する方法をご紹介します。特に、自動再生機能やPC画面での3列表示など、一部の高度な機能は実装されていませんが、基本的なスライド機能を習得するのに最適な例です。
実際の表示
矢印をクリックしてみてください。
PR
ソースコード例
HTMLソースコード例
<div class="slider__list">
<div class="slider__item">
<div class="slider__img">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/990d00.webp" alt="赤色のスライド" width="300" height="300">
</div>
</div>
<div class="slider__item">
<div class="slider__img">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/e87619.webp" alt="オレンジ色のスライド" width="300" height="300">
</div>
</div>
<div class="slider__item">
<div class="slider__img">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/ffdc00.webp" alt="黄色のスライド" width="300" height="300">
</div>
</div>
<div class="slider__item">
<div class="slider__img">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/0079f2.webp" alt="水色のスライド" width="300" height="300">
</div>
</div>
<div class="slider__item">
<div class="slider__img">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/008039.webp" alt="緑色のスライド" width="300" height="300">
</div>
</div>
<div class="slider__item">
<div class="slider__img">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2023/04/0013ac.webp" alt="青色のスライド" width="300" height="300">
</div>
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
</div>CSSソースコード例
.slider__list {
position: relative;
max-width: 450px;
margin: 40px auto;
overflow: hidden;
}
.slider__item {
display: none;
}
.slider__img {
position: relative;
}
.slider__img::before {
content: "";
display: block;
padding-top: 100%;
}
.slider__img img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 10px;
}
button.prev, button.next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
border-radius: 0 3px 3px 0;
}
button.next {
right: 0;
border-radius: 3px 0 0 3px;
}
button:active {
background-color: rgba(0, 0, 0, 0.8);
}JavaScriptソースコード例
document.addEventListener('DOMContentLoaded', () => {
let currentSlide = 0;
const slides = document.querySelectorAll('.slider__item');
const totalSlides = slides.length;
function showSlide(index) {
slides.forEach(slide => slide.style.display = 'none');
slides[index].style.display = 'block';
}
function moveSlide(step) {
currentSlide = (currentSlide + step + totalSlides) % totalSlides;
showSlide(currentSlide);
}
document.querySelector('.prev').addEventListener('click', () => moveSlide(-1));
document.querySelector('.next').addEventListener('click', () => moveSlide(1));
showSlide(currentSlide);
});まとめ
今回のデモでは、swiper.jsやslick.jsのような追加ライブラリを使用せずに、シンプルで基本的な画像スライダーを実装しました。自動再生やPC画面での3列表示などの複雑な機能は含まれていませんが、基本的なスライダーの概念と構造を理解し、カスタマイズする良い出発点となります。
