webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

CSSのみ無限ループスライダー
この記事を書いている人
Marie

Marie

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

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%)の位置に動いている間の余白を防ぐために、スライドを複製して常に画像が流れている状態にする必要があります。

1
2
3
4
5

スライドを複製しないと↑このように最後の画像の後が空白になってしまいます。

.slider divのwidthは各画像の横幅です。画像の高さは、.slider divのheight: 100%ではなく.sliderのheightをいじってください。

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

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

お気軽にコメントもしくは質問ボックスご活用ください。

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード CSSだけで作るループスライダー

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。