こんにちは！👋今日は、純粋なJavaScriptでシンプルかつ機能的な画像スライダーを作成する方法を説明します。各スライダー要素の仕組みと改善方法をより深く理解できるように、サードパーティのライブラリは使用しません。
完成したスライダーはこちらでご覧いただけます。 https://coursme.github.io/02-slider-js/
ステップ1. HTML構造の準備
まず、スライダーの HTML 構造を作成する必要があります。スライドのラッピングには<div>要素を使用し、切り替える画像をいくつか使用します。
HTML テンプレート:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slider</title>
<style>
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}
.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px;
}
</style>
</head>
<body>
<h1>Слайдер изображений</h1>
<div class="slider">
<div class="slides">
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+1" alt="Slide 1"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+2" alt="Slide 2"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+3" alt="Slide 3"></div>
<div class="controls">
<button class="control" id="prevBtn"><</button>
<button class="control" id="nextBtn">></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📋 説明:
.slider：固定サイズを設定し、境界線を超えるものをすべて非表示にするスライドのラッパー（overflow: hidden）。.slides：画像を変更するために左右に移動するすべてのスライドのコンテナー。.slide：各スライド。表示領域全体を占めるように、幅を100％に設定します。コントロールボタン：スライドを切り替える「進む」ボタンと「戻る」ボタンです。
ステップ2。スライドを切り替えるためのロジックを追加する
それでは、ボタンをクリックしたときにスライドを切り替えるという基本的なロジックに移りましょう。現在のスライドを追跡し、CSSプロパティtransformを使用してコンテナー.slidesを移動する必要があります。
script.jsでの実装：
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
const totalSlides = slide.length;
function updateSliderPosition() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0; // 最初のスライドに戻る
}
updateSliderPosition();
});
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = totalSlides - 1; // 最後のスライドに移動
}
updateSliderPosition();
});
🔨 仕組み:
translateX(): このプロパティを使用して、現在のスライドのインデックスに応じてスライドコンテナーを左右に移動します。ボタンのロジック：各ボタンはスライドインデックスを増減し、その後、コンテナーの位置を更新する関数
updateSliderPosition()が呼び出されます。
ステップ3. スライドの自動切り替えを追加する
スライダーをより使いやすくするために、一定間隔でスライドを自動的に切り替える機能を追加します。これにより、無限のギャラリーのような効果が生まれます。
自動切り替えを追加します。
let autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000); // 3秒ごとにスライドを変更
// ボタン操作時のオートスイッチングの停止
nextBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
prevBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
🕒 説明:
setInterval()関数を使用して、3秒ごとにスライドを自動的に切り替えます。ボタン（前進/後退）とのインタラクションは自動切り替えを一時停止しますが、その後再び開始して、スライダーが自動的に動作し続けるようにします。
ステップ4。終了とテスト
これで、スライダーが完全に機能するようになりました！ボタンを使って手動でスライドを切り替えたり、スライダーが数秒ごとに自動的に画像を変更したりすることができます。
結論
純粋な JavaScript でスライダーを作成することは、DOM の操作と CSS の操作を練習するのに最適な方法です。このようなスライダーは、アニメーション、フェード効果、またはインジケーターポイントを使用したナビゲーションなどを追加することで簡単に拡張できます。 🚀
ご不明な点がある場合や、スライダーに新しい機能を追加したい場合は、いつでもお気軽にお問い合わせください。 😄
最終コードのリポジトリ： https://github.com/Coursme/02-slider-js