カルーセル（スライダー）を簡単に作ってみる
出来上がったやつのサンプルページのリンク、イメージはこんな感じ
See the Pen Untitled by sueasen (@sueasen) on CodePen.
- HTML に枠を準備
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="slide">
<div id="prev"></div>
<div class="image_box"><img src="適当な画像のパス"></div>
<div id="next"></div>
</div>
<div class="thumbnail">
<img src="適当な画像のパス">
<img src="適当な画像のパス">
<img src="適当な画像のパス">
<img src="適当な画像のパス">
</div>
</body>
<script src="script.js"></script>
</html>
- CSS で配置を調整
style.css
@charset "utf-8";
.slide,
.thumbnail {
display: flex;
justify-content: center;
align-items: center;
}
.slide img {
height: 280px;
width: 280px;
}
.thumbnail img {
height: 70px;
width: 70px;
}
#prev {
width: 30px;
height: 30px;
border-bottom: 2px solid black;
border-left: 2px solid black;
cursor: pointer;
transform: rotate(45deg);
}
#next {
width: 30px;
height: 30px;
border-bottom: 2px solid black;
border-right: 2px solid black;
cursor: pointer;
transform: rotate(-45deg);
}
- JavaScript で動きを設定
script.js
/**
* スライダー、サムネイルにイベントを設定します
*/
window.addEventListener('load', (e) => {
const slideDatas = {
top : document.querySelector('.image_box img')
, now : document.querySelector('.thumbnail img')
, list : [...document.querySelectorAll('.thumbnail img')]
};
slideDatas.list.forEach(dom => dom.onclick = () => {
slideDatas.now = dom;
slideDatas.top.src = slideDatas.now.src;
});
slideDatas.top.src = slideDatas.now.src;
document.querySelector('#prev').onclick = () => slideMoveClick(slideDatas, -1);
document.querySelector('#next').onclick = () => slideMoveClick(slideDatas, 1);
});
/**
* slide の prev, next を押下時の処理します
* @param { {[key: String]: Object} } slideDatas スライダー画像情報
* @param {Number} shift シフト値
*/
function slideMoveClick(slideDatas, shift) {
slideDatas.now = slideDatas.list[(slideDatas.list.length + slideDatas.list.indexOf(slideDatas.now) + shift) % slideDatas.list.length];
slideDatas.top.src = slideDatas.now.src;
slideDatas.top.animate(
{
transform: ['translateX(' + (-30 * shift) + 'px)', 'translateX(0px)']
, opacity: [0.2, 1]
}
, {
duration: 500,
iterations: 1
}
);
}