今日、便利なスライダーのない現代のサイトを想像することは困難です。🔥スライダーはウェブページをよりダイナミックで魅力的にし、より多くのコンテンツを表示し、画面上のスペースを節約するのに役立ちます。
この記事では、純粋なJavaScriptのみを使用し、追加のライブラリを使用せずに、いくつかの一般的なタイプのスライダーを作成する方法を説明します。これにより、プロジェクトを軽く、速く、メンテナンスしやすくできます。さあ始めましょう！
📌ライブラリではなく、純粋なJavaScriptを使用する理由は何ですか？
もちろん、Swiper、OwlCarousel、SlickJSなどのライブラリは非常に便利です。しかし、純粋なJavaScriptには明らかな利点があります。
🚀ページサイズが小さく、読み込み速度が速くなります。
🎯 機能を完全に制御できます。
🛠️ 特定のタスクに合わせて柔軟に微調整できる機能。
🔖 シンプルなスライダーの要素：それぞれの目的は？
コードを書き始める前に、スライダーのHTMLとCSSの構造に要素が必要な理由を理解しましょう。
スライダーのコンテナー（
slider)：スライドの表示領域を制限するメインブロック。スライドコンテナー（
slides)：画像（スライド）が含まれる内部ブロック。CSSを使用すると、このブロックはスライドを切り替えながら左右に移動します。コントロールボタン（
prevとnext): ユーザーが手動でスライドを切り替えることができます。
🖥️例1：ボタン付きの基本的な水平スライダー
HTMLフレームワークを作成します。
<div class="slider">
<div class="slides">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
</div>
<button class="prev">←</button>
<button class="next">→</button>
</div>スタイルのCSS:
.slider {
width: 800px;
overflow: hidden; /* Скрываем лишние слайды */
position: relative;
margin: auto;
}
.slides {
display: flex; /* Располагаем изображения горизонтально */
transition: transform 0.5s ease; /* Анимация перехода */
}
.slides img {
width: 800px; /* Ширина каждого слайда равна ширине слайдера */
flex-shrink: 0; /* Запрещаем сжатие изображений */
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
JavaScript、ロジックの説明：
// DOM 要素を取得する
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentSlide = 0; // 現在のスライド
// スライド切り替え機能
function showSlide(index) {
if (index < 0) {
currentSlide = images.length - 1; // 最初のものよりも小さい場合は、最後のものに移動します
} else if (index >= images.length) {
currentSlide = 0; // 最後のものより大きい場合は、最初のものに移動します
} else {
currentSlide = index;
}
// スライドコンテナーを目的の位置に移動します
slides.style.transform = `translateX(-${currentSlide * 800}px)`;
}
// クリック処理
prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));🎨例2：フェード効果を持つ自動エンドレススライダー
このオプションは、スムーズに切り替えられるバナーやギャラリーに適しています。
HTMLコード:
<div class="fade-slider">
<img class="fade-slide active" src="slide1.jpg">
<img class="fade-slide" src="slide2.jpg">
<img class="fade-slide" src="slide3.jpg">
</div>
CSSスタイル:
.fade-slider {
position: relative;
width: 800px;
height: 500px;
margin: auto;
}
.fade-slide {
position: absolute;
opacity: 0;
transition: opacity 1s ease;
width: 100%;
height: 100%;
}
.fade-slide.active {
opacity: 1;
}
スライダーを動作させるためのJavaScript：
const slidesFade = document.querySelectorAll('.fade-slide');
let currentFade = 0;
function fadeShowSlide() {
slidesFade.forEach(slide => slide.classList.remove('active')); // アクティブなクラスを削除します
currentFade = (currentFade + 1) % slidesFade.length; // 次のスライドに進みます
slidesFade[currentFade].classList.add('active'); // 現在のスライドを表示します
}
// 4秒ごとに自動切り替え
setInterval(fadeShowSlide, 4000);📱 例3：モバイルスワイプ対応のアダプティブスライダー
このスライダーは、モバイルデバイスでスワイプして切り替えることができます。
スワイプを実装するための一般的なJS原則：
const slider = document.querySelector('.slides');
let startX = 0;
let endX = 0;
slider.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
});
slider.addEventListener('touchmove', e => {
endX = e.touches[0].clientX;
});
slider.addEventListener('touchend', () => {
if (startX - endX > 50) {
showSlide(currentSlide + 1); // 左にスワイプ
}
if (endX - startX > 50) {
showSlide(currentSlide - 1); // 右にスワイプ
}
});
🎯 JavaScriptのスキルをさらに磨きたいですか？
アプリでプログラミングの学習を始めましょう コディック! 👨💻
Kodikは、インタラクティブなレッスンと興味深いタスクを通じて、JavaScriptやその他のテクノロジーを簡単に習得するのに役立つ便利なアプリケーションです。