【CSSのみ】画像がスムーズに流れる無限ループスライダー【jQuery不要】

CSS

完成イメージ

実装方法

まずはHTMLを用意します。

画像をdivで包んだものをコピーして同じものを2つ用意してください(2つのdiv.galleryの中身は同じにします)。

<div class="gallery-p">
	<div class="gallery">
		<img src="" alt="画像1">
		<img src="" alt="画像2">
		<img src="" alt="画像3">
		<img src="" alt="画像4">
	</div>
	<div class="gallery">
		<img src="" alt="画像1">
		<img src="" alt="画像2">
		<img src="" alt="画像3">
		<img src="" alt="画像4">
	</div>
</div>

以下をCSSに記述↓

.gallery-p {
	overflow: hidden;
	display: flex;
}

.gallery {
	display: flex;
}

.gallery img {
	height: 200px; /* スライダーの高さ */
	width: auto;
}

@keyframes gallery {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

@keyframes gallery2 {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-200%);
	}
}

.gallery:first-child {
	animation: gallery 60s -30s linear infinite; /* スライダーの速度(2番目の数字は1番目の数字の半分にします) */
}

.gallery:last-child {
	animation: gallery2 60s linear infinite; /* 60sの部分は上の数字と同じ */
}

スライダーにホバーした時に動きを止めるには、下のコードを追加します。

.gallery-p:hover .gallery {
	animation-play-state: paused;
}

注意点

画像の数が足りないなどで横幅が足りないと、スライダーがうまく動作しません。

その場合は、画像を付け足すか、div.gallery-pにwidthを指定するなどして、div.galleryの幅がdiv.gallery-pの幅を超えるようにしてください。