CSSで作るスライドショー（自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク）

数日前、「バナー画像をスライドショーで表示したい」とふと思いつきまして、作成に挑戦してみることにしました。
かなり手こずったものの、思い描いていたようなスライドショーをなんとか形にすることができたので、備忘録として以下にコードなどを載せておこうと思います。

CSSで作るスライドショーの見本

　　

• 幅300px、高さ250px
• フェイドイン・フェイドアウトで画像が切り替わる
• 自動で繰り返す
• それぞれの画像にリンクを貼ることができる

というスライドショーを作るべく試行錯誤を重ねました。
上3つは割とすぐにできたのですが、「それぞれの画像にリンクを貼ることができる」がなかなかうまくいかず（各画像に違うURLを指定しても、全て最後の画像に貼ったURLに飛んでいってしまうという）……。

どこをどうやって辿り着いたのか、こちらのページのコメント欄を発見し、こちらのスライドショーのソースを参考にさせて頂いた所、希望通りのスライドショーを実現することができました。ありがとうございます！

CSSで作るスライドショーのコード

CSSで作るスライドショーのhtml

以下のコードを、スライドショーを表示させたい部分に記述します。

「aspslide」というdivのなかに、「id=”asnakami1“（以降数字が1ずつ増えていく） class=”asnakami“（こちらは変わらず）」がついたdivを入れていきます。
上記の場合はバナー画像が6個の場合です。7個目を足す場合は、

<div id="asnakami7" class="asnakami"><a href="" target="_blank"><img src=""></a></div>

となります。

CSSで作るスライドショーのCSS

以下のコードをスタイルシートに追加します。

秒数の設定

「#asnakami1」などの、

30s 0s

という部分で、スライドショーの秒数を設定しています。
上記の場合は、全部で30秒、「#asnakami1」は0秒から表示、「#asnakami2」は5秒から表示……ということを表しています。

なので7枚目のバナー画像を足す場合は、上の30sを全て35sにし、

#asnakami7{
-moz-animation: fadeinout 35s 30s infinite;
-webkit-animation: fadeinout 35s 30s infinite;
-o-animation: fadeinout 35s 30s infinite;
animation: fadeinout 35s 30s infinite;      
}

というコードを足します。

画像を減らす場合は、30sを25s、20s……と減らしていきます。

その他

「fadeinout」は任意でつけたスライドショーの名前です。

「infinite」は無限に繰り返すことを表しています。

CSSで作るスライドショーのメリット

Flashなどと違い、ほとんどのブラウザやデバイスで表示が可能です。上記はFirefox、Google Chrome、IE11、Androidのスマホ、iPadで表示を確認しました（スマホとiPadはPCで見た時とちょっと挙動が異なりますが、リンクはきちんと動作しているのでまァいいかと……）。

しかしちょっと問題があって、IE9以下だともしかしたら表示がされないかも……。

「#asnakami1」などに、

-ms-animation:fadeinout 35s 30s infinite;

を足せばいいのですが、そうすると今度はIE10以降で表示されなくなってしまうようなのです。

なのでやむを得ず古いバージョンのIEは切り捨てることにしました。
この場合も特にエラーが出たりはせず、ただ単にその部分が空白になるだけです。

CSSで作るスライドショーのデメリット

バナー画像を増やすたびに、CSSに「#asnakami7」などを足していかないといけないことでしょうか。
バナー画像がものすごくたくさんある場合は、JavascriptやjQueryなどでスライドショーを作った方がよさそうです。

jQueryのスライダー

上とちょっとタイプが違うのですが、このブログには以下のようなスライダーも所々に設置しています。

こちらはCSSのスライダーと違いアイテム数を好きに増やしたり減らしたりできます。
WordPressだとjQueryのカプセル化というものをしないと動かないので、これもまた手こずりました。
こちらのコードも一緒に載せようかと思っていたのですが、かなり長くなってしまうので別の記事にしました。

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

こちらの記事ともども、スライドショーを作成したい方のご参考になりましたら幸いです。

folder Web関連

tag スライドショー