SNSをチェック

シンプルなJavaScriptスライダーアニメーションの作り方

スライダーアニメーションは、ユーザーに複数の画像やコンテンツを順番に表示するのに役立ちます。今回は、生のJavaScriptを使ってシンプルなスライダーアニメーションを作成する方法を紹介します。

ステップ1: HTMLの設定

まず、HTMLにスライダーの基本構造を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slider</title>
<style>
.slider {
width: 100%;
overflow: hidden;
position: relative;
}

.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slide {
min-width: 100%;
box-sizing: border-box;
}

.nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
}

.nav button {
background: rgba(255, 255, 255, 0.5);
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<div class="slide"><img src="image1.jpg" alt="Image 1"></div>
<div class="slide"><img src="image2.jpg" alt="Image 2"></div>
<div class="slide"><img src="image3.jpg" alt="Image 3"></div>
</div>
<div class="nav">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

ステップ2: JavaScriptの設定

次に、JavaScriptでスライダーの動作を制御します。

document.addEventListener("DOMContentLoaded", function() {
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let currentIndex = 0;

function showSlide(index) {
if (index >= slide.length) {
currentIndex = 0;
} else if (index < 0) {
currentIndex = slide.length - 1;
} else {
currentIndex = index;
}
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}

prevBtn.addEventListener('click', function() {
showSlide(currentIndex - 1);
});

nextBtn.addEventListener('click', function() {
showSlide(currentIndex + 1);
});

// 自動スライド機能
setInterval(function() {
showSlide(currentIndex + 1);
}, 3000); // 3秒ごとに次のスライドを表示
});

詳細説明

HTML

  • .slider: スライダーの外枠。overflow: hiddenでスライダー外の内容を隠します。
  • .slides: 全てのスライドを包含する要素。display: flexで横並びにし、transitionでスライド移動を滑らかにします。
  • .slide: 個々のスライド要素。min-width: 100%で各スライドを全体幅に設定します。

CSS

  • スライダーのスタイルとアニメーションを設定します。
  • .navは前後ボタンをスライダーの中央に配置します。

JavaScript

  • showSlide関数で、スライドを表示します。transform: translateXを使ってスライドを移動させます。
  • prevBtnnextBtnにクリックイベントを追加し、スライドを前後に移動させます。
  • setIntervalを使って自動スライド機能を追加します。

この方法を使えば、シンプルかつ効果的なスライダーアニメーションを作成できます。自分のニーズに合わせてカスタマイズも可能です。ぜひ試してみてください!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です