やりたいこと
以下のように、左から画像が流れ、無限にループする
イメージスライダーの実装方法をご紹介します。
レスポンシブに対応、
画像を何枚でも増やすことができます。
HTML
ここでは画像を6枚使ってますが、画像は何枚でも増やせます。
<div class="wrapper">
<div class="content">
<img src="1.JPG" />
</div>
<div class="content">
<img src="2.JPG" />
</div>
<div class="content">
<img src="3.JPG" />
</div>
<div class="content">
<img src="4.JPG" />
</div>
<div class="content">
<img src="5.JPG" />
</div>
<div class="content">
<img src="6.JPG" />
</div>
</div>CSS
ポイントとなるCSSだけ紹介します。
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
overflow: hidden; /* はみ出した部分を表示させない*/
}
.wrapper {
position: relative;
width: 50%; /* 画像1枚の横幅 */
aspect-ratio: 3 / 2;
}
.content {
position: absolute;
left: 0;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
}
img {
width: 100%;
object-fit: cover; /* 画像を中心に */
}9行目 : .wrapperに、 overflow:hiddenを指定すれば、 以下のようになります。
javaScript
画像一枚の横幅を取得し、計算する ことにより、 レスポンシブに対応させ、 なおかつ、 画像を何枚でも増やすことができます
const contents = document.querySelectorAll(".content");
// 画像一枚の横幅を取得
const wrapperWidth = document.querySelector(".wrapper").clientWidth;
for (let i = 0; i < contents.length; i++) {
// 画像の枚数分だけループ
let leftValue;
const element = contents[i];
// 画像を横一列に並べる
let originValue = -wrapperWidth * (i - 1);
element.style.transform = "translateX(" + originValue + "px)";
setInterval(function () {
// 1pxづつ右へスライドさせる
leftValue = originValue += 1;
element.style.transform = "translateX(" + leftValue + "px)";
if (originValue > wrapperWidth * 2) {
// 画像2枚分右へ隠れたら、一番左にスライド
originValue = -wrapperWidth * (contents.length - 2);
}
}, 10); // 100分の1秒ごとに処理
}参考
【javascript】setIntervalと、それを停止させるclearIntervalの使い方
まとめ
- 画像一枚の横幅を取得
- transform:translateを使って、画像枚数分、横にスライドさせ、画像を1列に並べる。
- 画面の右に隠れた画像を、一番左に移動させる。
