初心者でも簡単にできるCSSだけで画像スライダーを実装する方法

初心者でも簡単にできるCSSだけで画像スライダーを実装する方法

どうも、De_webdesignです。

今回はCSSのみで画像スライダーを実装していきたいと思います。画像スライダーというとjQueryのプラグインやJavascriptを書いて実装するケースが多いと思いますが、実はCSSだけでも実装できます。jQueryのプラグインを使用した画像スライダーは別記事でまとめていますので下記より御覧ください。

https://admin.begeeek.com/webdesign/image-slider-slick/

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

デモ

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%のとき(今回は10sを指定しているのでおよそ3秒)に、-300px(スライド一枚分の横幅)移動します。 66%のときにスライド2枚分 = -600px移動、100%のときに始点の0に戻ります。

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

関連する記事