Top

CSS だけでスライドショー

jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。

この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。

slideshow

作り方

制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。

HTML

<div class="photo-show">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
</div>

必要最低限の記述です。img タグに width、height、alt 属性を付けたい場合はそれぞれに付け足してください。

CSS

.photo-show { 
    height: 440px; /*表示したい大きさ*/
    margin: 30px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    width: 440px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
    animation: show 16s infinite;
    -webkit-animation: show 16s infinite;
    border-radius: 50%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}

一応、古めの Safari を考慮して -webkit- ベンダープレフィクスを付けていますが、最新版ではいらないのでなくても構いません。

マウスカーソルが重なった際に動きが止まるように、animation-play-state というプロパティを使っています。

スポンサーリンク

デモ

滝つぼトマトスカイツリーマダラ雲滝浅草寺海岸バラ

フェイドイン・フェイドアウトで切り替わる様子がわかります。マウスカーソルを重ねることでアニメーションが止まる四角い画像になるようにしています。ではなぜ上記の CSS でスライドショーになるかというのを下で説明してみます。

何故スライドショーになるのか

滝つぼトマトスカイツリーマダラ雲滝浅草寺海岸バラ

あえて画像を重ねずに表示すると上のようになります。アニメーションの出たり消えたりするリズム自体は全ての画像同じですが、アニメーションのスタートする時間が異なるのがわかるかと思います。nth-of-type 疑似セレクタを使う事で各画像のアニメーション開始時間をずらしています。時間をずらしているものを重ねることでスライドショーのように見せています。

まとめ

全て同じアニメーションでもスタート時間をずらすだけでスライドショーのような挙動が可能です。フェイドイン・フェイドアウトだけではなく横移動でのスライドショーも頑張れば CSS だけで作ることが出来ます。これも同様にスタート時間をずらしていくだけです。

画像の枚数を変えたりすると全てのタイミングが狂うため、調整が面倒くさいのが CSS の残念な部分ではあるのですが仕方がないですね。もし枚数を変えたい、アニメーションの感覚を変えたいなどの場合は時間関係の記述がすべて変更になるので調整してください。

アニメーションに z-index 値の変更などを入れれば画像に a タグをつけてをアンカーにしたりも出来るかと思います。仕組みは簡単なので色々応用が効きそうです。

  1. レシピや写真のサイトでは効果的かも知れないですね。
    複雑なJS等使わなくても、こんなに簡単にできるのですね。

    2016-07-10 11:36Reply
    • 今はCSSでも結構色々出来ますからね!
      もっと複雑な感じのもCSSオンリーで作れますが簡単なやつをまず!

      2016-07-11 21:59Reply
  2. #fff

    すごく参考になったからお礼の足跡。

    2017-02-10 16:23Reply
  3. 匿名

    動作しない

    2017-05-24 18:28Reply
  4. 通りすがり

    HTMLでのクラス名の指定は
    class=”photoshow”
    となっていますが

    CSSでのクラスの指定では
    photo-showとなっています。

    クラス名が一致しないので動作することはないです。

    2017-05-24 18:44Reply
    • ありがとうございます。
      治しました。

      2017-05-25 23:13Reply
  5. atu

    掲載したい画像の数を4つにしたのですが最後の画像までいくと最初の画像がスライドショーされるまで時間がかかってしまうのですがどう解決したらよろしいでしょうか

    2017-06-04 23:30Reply
    • CSSのアニメーションの仕組みを理解して、書き換えてもらえばそのようにも出来ます。
      あうようにCSSを変更してください。

      2017-06-10 10:12Reply
  6. とても簡単に設置できました。ありがとうございます。
    初歩的な質問で申し訳ないですが、各画像にリンクを張る場合どのように記述すればいいですか?

    2017-07-28 12:13Reply
    • 状況がよくわかりませんが前においたら当然構造が崩れるので、駄目だと思います。
      書き換えなければ出来ません。

      2017-07-29 17:04Reply
      • トーリス・ガリ

        同一箇所にpositionでまとめていますので、仮にと言う形にしたとしてもリンクは無理ですね。
        以下のようなソースだとします。




        この4つをposition: absolute;で同じ場所に重ねた場合、HTMLのルールにより一番上の画像はリンクつき画像4に固定されます。
        スライドショーのようにopacityの効果で見えたり見えなくなったりしたとしても、実際にその場からなくなったわけではない以上、この条件は変わりません。
        もし改善するのであれば、display: none;を使って現在表示されてるもの以外のリンクを完全に非表示にしてしまえばできるでしょうけど。

        2018-10-18 20:49Reply
        • z-indexいじればと記事にも書いてます

          2018-10-19 0:24Reply
  7. snow

    自分で作ってみたのですが、何度か画像の上にカーソルを持ってくると、画像が消えてしまうことがあります。なぜそのようになってしますのでしょうか。何か原因はありますか。

    2017-12-06 22:50Reply
    • 状況がわからないので何とも言えません

      2017-12-24 10:36Reply
  8. K

    載せたい画像のフォルダ名は[img src]の部分ですか?
    初心者でどの部分を変えれば画像が表示されるのかわかりません。

    2018-03-27 23:38Reply
    • 勉強してください。

      2018-06-12 8:50Reply