メディア

CSSだけで動くスライドショー

CSSだけで動くスライドショー

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画像がずらっと並んだカルーセルスライダー的なのではなく、画像を1枚ずつ表示するタイプのスライドショーです。

画像を4枚を表示する想定で作成しています。

CSSの解説

overflow: hiddenを指定した親要素の外に画像を配置しておき、以下の動作を時間差で各画像に適用させます。

右から画像をスライドさせて登場 → 一定時間待機 → 一定時間後に左へスライドして退場

CSSで作るスライドショーの仕組み
図解にするとこんな感じ
  • 親要素 .slide-show
    • 任意のサイズを指定
    • 子要素(画像)の起点にするため、position: relativeを指定
    • overflow: hidden範囲外の要素を隠す(重要)
  • 子要素 img(共通)
    • position: absoluteを使い、表示範囲の右側left: 100%へ配置(共通)
    • スライドアニメーションanimation: slide 20s linear forwards infinite を指定する
      (アニメーション名|時間|直線移動|終了時維持|ループ)
  • 1枚目のみ2つのアニメーションを指定 img:nth-of-type(1)
    • スライドアニメーション slide
    • 画面表示時のアニメーション slide-start
      これがないと最初に空白が表示される
  • 2枚目以降は開始を遅らせる img:nth-of-type(2)~(4)
    • animation-delay: 全体の1/4時間 で遅延時間を指定
  • スライドアニメーション slide
    • 0%:表示範囲より右 left: 100%
    • ~3%:表示範囲へスライド left: 0
    • ~ 25%:そのまま待機 left: 0
      (ここで次の画像もアニメーション開始)
    • ~28%:範囲より左へ left: -100%
      (ここで次の画像がスライドしてくる)
    • 100%:そのまま待機 left: -100%
  • 画面表示時のアニメーション slide-start(1枚目の初回だけ)
    • ~25%:範囲内に表示しておくleft: 0
    • ~28%:範囲の左へスライドleft: -100%

画面表示時から左→右のスライドを最初から行ってしまうと、最初に何もない空間から画像がスライドされます。それを避けるために1枚目の画像に1回だけ slide-startアニメーションを適用させます。
ただし、2周目以降は通常のスライド slide をさせたいので、animationをコンマで分けて2つとも指定します。
(slide-startを後ろに書きましょう)

画像の枚数を変更する場合

画像 (img) の数を増やす・減らす場合は、アニメーションの時間などを変更する必要があります。

(変更箇所)
・animation の指定時間を「枚数 × 5秒」に(例:10枚なら50s)
・2枚目以降の animation-delay は5秒ごと
・アニメーションの left: 0 の時間を 「100% / 枚数」に(例:10枚なら10%まで)

下記に例としていくつか枚数を変えた場合のCSSを記載しておきます。

カスタムプロパティを使っての一括指定を...と考えましたが、無理でした(笑)

応用CSS

拡大・縮小しながらスライド

スライドアニメーションと同時にtransform: scale()のスケール変化を追記して、拡大しながら登場・縮小しながら退場の動きを作ったもの。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画像を表示するタイミングにtransform: scale(1)、退場する(範囲外の)タイミングにtransform: scale(0.1)を追記するだけです。