横並びに配置した画像をスライドショーのように無限に横スクロールさせる方法を紹介します。
非推奨のmarqueeタグは使わず、CSSのみで実装しています。

Ad

右から左にスクロール

DEMO

HTML

CSSのみで実装しているので、スクロールさせたい画像のリストを2回書いています。

<div class="marquee-right">
	<ul>
		<li><img src="https://blog.grinee.net/demo/images/image1.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image2.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image3.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image1.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image2.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image3.png"></li>
	</ul>
</div>

CSS

translateXの位置で流れる方向を調整しています。
今回は2回画像のリストを並べているので、translateXの値を50%にしています。
3回並べる場合は33.3%…など数値は適宜変更してください。

.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 20s linear infinite; /* 20s スクロール1回にかかる秒数 */
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px; /* 余白 */
	width: calc(100vw / 3 - 10px); /* 3 写真の枚数にあわせる */
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

左から右にスクロール

DEMO

HTML

class名変更していますが、構成は同じです。

<div class="marquee-left">
	<ul>
		<li><img src="https://blog.grinee.net/demo/images/image1.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image2.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image3.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image1.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image2.png"></li>
		<li><img src="https://blog.grinee.net/demo/images/image3.png"></li>
	</ul>
</div>

CSS

transformを入れ替えているだけです。

.marquee-left {
	overflow: hidden;
}
.marquee-left ul {
	animation: marquee-left 20s linear infinite; /* 20s スクロール1回にかかる秒数 */
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-left ul li {
	list-style: none;
	padding: 0 5px; /* 余白 */
	width: calc(100vw / 3 - 10px); /* 3 写真の枚数にあわせる */
}
.marquee-left img {
	display: block;
	width: 100%;
}
@keyframes marquee-left {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0%);
	}
}

Javascript版

画像リストを2回も記述するのは手間だと思ったので、JavaScript版も作ってみました。

《Javascript》横並びにした画像を無限に横スクロールさせる