Swiper・slick・Splideなど、スライダー系のライブラリなどを使えば、無限ループスライダーは作れます。
しかし、CSSだけでも簡単に実装することができます。
こちらがデモになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
今回は、このCSSだけで無限ループスライダーを作る方法を解説していきます。
ちなみに、先ほどのライブラリを使った方法は以下になります。
-
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法
続きを見る
-
【slick】横方向に流れ続ける無限ループスライダーを作る方法
続きを見る
-
【Splide】横方向に流れ続ける無限ループスライダーを作る方法
続きを見る
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
CSSのみで無限ループスライダーを作る方法
それでは、早速ですがCSSのみで無限ループスライダーを作る方法を解説していきます。
HTMLとCSSを書くだけですが、CSSではCSSアニメーションを使います。
HTMLのコード
HTMLのコードはこちらです。
<div class="slider-wrapper">
<ul class="slider">
<li class="slide">
<img src="画像パス1" alt="" />
</li>
<li class="slide">
<img src="画像パス2" alt="" />
</li>
<li class="slide">
<img src="画像パス3" alt="" />
</li>
</ul>
<ul class="slider">
<li class="slide">
<img src="画像パス1" alt="" />
</li>
<li class="slide">
<img src="画像パス2" alt="" />
</li>
<li class="slide">
<img src="画像パス3" alt="" />
</li>
</ul>
</div>これで、3枚のスライドを表示させます。
ポイントは、同じスライドのグループを1つではなく2つ作ることです。
もしこれが1つだと、このようになります（言葉で解説するより、実際に見た方が分かると思います）
See the Pen
CSSのみで無限ループスライダー(スライダーが1つしかない場合) by junpei (@junpei-sugiyama)
on CodePen.
CSSのコード
続いてCSSのコードはこちらです。
/* スライダー全体 */
.slider-wrapper {
display: flex; /* スライドのグループを横並び */
overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
animation: scroll-left 20s infinite linear .5s both;
display: flex; /* スライド3枚を横並び */
}
/* スライド */
.slide {
width: calc(100vw / 3); /* 3はスライドの枚数 */
}
/* スライドの画像 */
.slide img {
display: block;
width: 100%;
}
/* CSSアニメーション */
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}補足します。
overflow: hidden;に関しては、スライダーが画面幅いっぱいなら関係ありませんが、そうでなければ2つ目のスライダーがはみ出てしまうので書いています。
animation: scroll-left 20s infinite linear .5s both;は、CSSのプロパティanimationのショートハンドになります。
意味は以下になります。
animation-name: loop-slide; /* アニメーション名 */
animation-duration: 20s; /* アニメーション開始から終了までの時間 */
animation-iteration-count: infinite; /* アニメーションの回数 */
animation-timing-function: linear; /* アニメーションが変化する速度 */
animation-delay: .5s; /* アニメーション開始までの遅延時間 */
animation-fill-mode: both; /* アニメーション開始と終了時の状態 */animation-iteration-countのinfiniteは、『無限ループ』となります。
animation-timing-functionのlinearは、『等速』となります。
animation-fill-modeのbothはちょっとイメージしにくいですが、アニメーションが終了した後も最後のキーフレームの状態を維持することを意味します。
つまり、アニメーションが終了した後も最後のキーフレームの状態が維持されます。
そして、最後のスライドに到達した後も連続してスライドするためにbothを指定しています。
デモ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
逆方向(右方向)の無限ループスライダーを作る方法
先ほどは左方向に流れるスライダーでしたが、右方向にする方向を解説します。
HTMLに変更はありません。
CSSのコード
/* 修正前(左方向) */
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* 修正後(右方向) */
@keyframes scroll-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}左方向の場合は、0から-100とマイナス方向に移動します。
右方向の場合は、-100から0とプラス方向に移動します。
あとはアニメーション名を変える必要はありませんが、右方向に移動させるのにscroll-leftは変なので、scroll-rightに変更しています。
もちろんscroll-rightにしたら、animation: scroll-left 20s infinite linear .5s both;もanimation: scroll-right 20s infinite linear .5s both;に変更しましょう。
デモ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
hover(マウスオーバー)で一時停止させる方法
先ほどまでは、スライドにマウスカーソルを乗せても動き続けていましたが、カーソルを乗せると一時停止させる方法を解説します。
CSSのコード
CSSは以下のコードを追記します。
/* hover(マウスオーバー)で一時停止 */
.slider-wrapper:hover .slider {
animation-play-state: paused;
}スマホでタップしても止まります。デモで確認してみて下さい。
デモ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
hover(マウスオーバー)で拡大させる方法
今度は、スライドにマウスカーソルを乗せると画像が拡大する方法を解説します。
CSSのコード
CSSは以下のコードを追記します。
/* hover(マウスオーバー)で拡大 */
.slide {
cursor: pointer;
overflow: hidden;
}
.slide img {
transition: transform 0.4s;
}
.slide:hover img {
transform: scale(1.1);
}transitionを書かないとカーソルを乗せたら一瞬で拡大されるので、じんわり拡大させる場合には必須です。
また、overflow: hidden;で拡大した画像がはみ出ないようにしています。
それに関しては以下の記事を参考にしてみて下さい。
-
【CSS】hover(マウスオーバー)で画像を拡大する方法
続きを見る
デモ
See the Pen
CSSのみで無限ループスライダー（hover(マウスオーバー)で拡大） by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、CSSのみで横方向に流れ続ける無限ループスライダーを作る方法を解説してきました。
ライブラリを使いたくない、または使わないようにと指定された場合は、この方法を使ってみましょう。
以上になります。
