【初心者向け】CSSだけでシンプルな画像スライダーを実装する方法

2022年9月9日2023年1月19日

今回はCSSのみで画像スライダーを実装していきたいと思います。画像スライダーというとjQueryのプラグインやJavascriptを書いて実装するケースが多いと思いますが、実はCSSだけでも実装できます。

では、CSSのみで画像スライダーを実装していきたいと思います。

デモ

https://codepen.io/keisuke1989/embed/ZEWaYqo?height=265&theme-id=dark&default-tab=css,result

HTML

<div id="css-slider">
	<div class="slider-wrapper">
		<div class="slide-item"></div>
		<div class="slide-item"></div>
		<div class="slide-item"></div>
	</div>
</div>

なんのへんてつもないHTMLです。これがわからないという方はHTMLの基礎を勉強してから戻ってきてください。
今回はスライド画像3枚を想定してスライダーを作成していますが、枚数が変わる場合CSSの値も少し変わってきますのでそこは適宜変更お願いします。

CSS

#css-slider {
	width: 300px;
	height: 200px;
	overflow: hidden;
}

.slide-item {
	width: 300px;
	height: 200px;
	float: left;
	position: relative;
}


.slider-wrapper {
	width: 300%;
	position: relative;
	left: 0;
	will-change: transform;
	animation: slider 10s infinite;
}

@keyframes slider {
  0% { transform: translateX(0); }
  33% { transform: translateX(-300px); }
  66% { transform: translateX(-600px); }
  100% { transform: translateX(0); }
}

上記がスライダー用のCSSになります。

#css-sliderには、

width:スライド一枚の横幅
height:スライド一枚の縦幅
overflow:hidden　はみ出した要素を隠す

という至って単純なスタイルになります。

.slide-itemには、

width:スライド一枚の横幅
height:スライド一枚の縦幅
float: left　横並びにするため
position: relative

こちらもよく使用するプロパティしか使用していません。

.slider-wrapperには、

width: 300%
これはスライド画像を横並びにするのに十分な横幅が必要になります。そうしないとfloatした画像が下に回り込んでしまうので。
今回の場合はスライド画像3枚分を横並びにしたいので300%を指定しています。親の#css-sliderに300pxが指定されているので実際は900pxがwidthになります。

left : 0
今回はrelativeが指定されているので相対的な値、つまりもともとあるはずだった場所からleft:0の場所に配置します。

will-change:transform
これはあまり使用することがなかったかもしれませんが、ブラウザにこれを使用しますよというためのプロパティです。今回はtransformを指定しています。

animation: slider 10s infinite
CSSアニメーションで「slider」という名前のアニメーションを10秒かけて実行（infiniteで無限ループにしています）という指定です。

@keyframes slider
こちらで実際のアニメーションの動きを指定します。指定する値は何％でもかまいませんが、今回はスライドが3枚ですので33%ずつ区切っています。

transform:translateX
実際に要素をX軸に沿って移動させます。33%のとき（今回は10ｓを指定しているのでおよそ3秒）に、-300px（スライド一枚分の横幅）移動します。 66%のときにスライド2枚分 = -600px移動、100%のときに始点の0に戻ります。

やっていることとしては画像を横並びにしてCSSアニメーションで横に移動しているだけです。本当の画像スライダーのように戻らずにずっと横にスクロールしたい場合はJS or jQueryでの実装が必要になってきます。