CSSだけで作るループスライダー
584
この記事を書いている人
CSSのみフェードスライドショーの反響が良かったのでループスライダーも作ってみました。
ループスライダーの方がフェードよりも簡単だと思います。
仕組みとしては、display: flexで横並びさせて、右から左に永久的に動かしている感じです。
テキストを流すアニメーションで使ったのと同じ仕組みです。
HTML
<div class="slider-wrap">
<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>1つ目のsliderと2つ目のsliderは同じものです。
1つのsliderを用意した後、コピーで複製してください。
左端まで行った後に、途切れないように複製してループさせる仕組みです。
今回も画像ではなく背景画像を使用します。
CSS
.slider-wrap {
overflow: hidden;
display: flex;
flex-wrap: nowrap;
}
.slider {
height: 60vh;
position: relative;
margin: auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
animation: slide-loop 20s linear infinite;
}
.slider div {
width: 500px;
height: 100%;
background-position: center;
}
@keyframes slide-loop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* 1枚目のスライド */
.slider div:first-of-type {
background-image: url(https://chiiweb.net/media/wp-content/uploads/2024/07/slide1.jpg);
}
/* 2枚目のスライド */
.slider div:nth-of-type(2) {
background-image: url(https://chiiweb.net/media/wp-content/uploads/2024/07/slide2.jpg);
}
/* 3枚目のスライド */
.slider div:nth-of-type(3) {
background-image: url(https://chiiweb.net/media/wp-content/uploads/2024/07/slide3.jpg);
}
/* 4枚目のスライド */
.slider div:nth-of-type(4) {
background-image: url(https://chiiweb.net/media/wp-content/uploads/2024/07/slide1.jpg);
}
/*5枚目のスライド */
.slider div:nth-of-type(5) {
background-image: url(https://chiiweb.net/media/wp-content/uploads/2024/07/slide2.jpg);
}1つ目のスライドが、translateX(0)通常の位置から、translateX(-100%)の位置に動いている間の余白を防ぐために、スライドを複製して常に画像が流れている状態にする必要があります。
スライドを複製しないと↑このように最後の画像の後が空白になってしまいます。
.slider divのwidthは各画像の横幅です。画像の高さは、.slider divのheight: 100%ではなく.sliderのheightをいじってください。
できるだけ親要素でサイズを決定していた方が調整が楽なのでオススメです。
昨日、記事を公開して就寝したのですが、朝にコメントいただいて嬉しかったです
お気軽にコメントもしくは質問ボックスご活用ください。
いいなと思ったら
TAPしてね♡↓
コメントは承認後に表示されます。