こんにちは、コンスキです。
今回は一からスライダーを作成する方法をご紹介します。
基本的なコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>スライダー</title>
</head>
<body>
<div id="slider">
<div class="slider_item" id="slider_item1">画像１</div>
<div class="slider_item" id="slider_item2">画像２</div>
<div class="slider_item" id="slider_item3">画像３</div>
</div>
<script src="main.js"></script>
</body>
</html>#slider {
position: relative;
width: 800px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
.slider_item {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 100%;
height: 100%;
opacity: 0;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
#slider_item1 {
background-color: blue;
}
#slider_item2 {
background-color: yellow;
}
#slider_item3 {
background-color: red;
}let sliderItems = document.getElementsByClassName('slider_item');
let activeItemIndex = 0;
let sliderItemWidth = 800; //スライダー画像の横幅
let switchingInterval = 3000; //スライダー画像が切り替わる間隔（ミリ秒）
sliderItems[activeItemIndex].style.opacity = '1';
sliderItems[activeItemIndex].style.left = '0';
// 表示されている画像以外の位置をスライダーの右外にリセットする関数
function itemPositionReset() {
Object.keys(sliderItems).filter(function(element) {
return element != activeItemIndex;
}).forEach(function(key) {
sliderItems[key].style.left = sliderItemWidth + 'px';
})
}
// 次のスライダー画像に切り替える関数
function nextElement(){
sliderItems[activeItemIndex].style.opacity = '0';
setTimeout(function() {
sliderItems[activeItemIndex].style.left = '-' + sliderItemWidth + 'px';
prevElementIndex = activeItemIndex;
if(activeItemIndex >= sliderItems.length - 1){
activeItemIndex = 0;
} else {
activeItemIndex++;
}
setTimeout(function() {
sliderItems[activeItemIndex].style.left = '0';
setTimeout(function() {
sliderItems[activeItemIndex].style.opacity = '1';
itemPositionReset();
}, 100)
}, 500);
}, 100)
}
//インターバルを開始
var intervalId = setInterval(function () {
nextElement();
}, switchingInterval);
以上のコードを書いてブラウザに表示させると、次のようなスライダーを設置することができます。
スライダーを自作するメリット
スライダーを自分で作るメリットはスライダーの機能を自由に変えることができることです。
ところで、プログラミングにおいてよく「車輪の再発名はよくない」といわれることがあります。
この言葉には、誰かがすでに作り上げたプログラムを自分で一から作ってしまうことがよくないという意味があります。
たしかにこの言葉の通り、自分で作ると非常に時間がかかるのに対してライブラリを使うと手軽にスライダーを作ることができますし、無駄な時間を省くことができます。
しかし、ライブラリの多くはプログラミング上級者が書いていることもあり、コードを見ただけではどのようにすれば、そのスライダーに機能を加えたり、動きに変化を加えたりできるのかわかりません。
自分で一から作れば、どの部分がどんな役割をしているコードなのか理解できるため、機能を追加しやすいんです。
例えば、今回ご紹介したコードを少し変化させて次のような縦方向にスライドするちょっと変わったスライダーを作ることができます。
コメント