CSSだけで作るループスライダー

2024/07/15 | 2024/11/21 1639

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき
小4・年長の母

もっと詳しくみる

CSSのみフェードスライドショーの反響が良かったのでループスライダーも作ってみました。

ループスライダーの方がフェードよりも簡単だと思います。

仕組みとしては、display: flexで横並びさせて、右から左に永久的に動かしている感じです。

テキストを流すアニメーションで使ったのと同じ仕組みです。

【css】テキストを右から左に流すアニメーション

chiiweb.net/media/css-animation-txt/

[目次]

1 HTML
2 CSS

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をいじってください。

できるだけ親要素でサイズを決定していた方が調整が楽なのでオススメです。

昨日、記事を公開して就寝したのですが、朝にコメントいただいて嬉しかったです