数日前、「バナー画像をスライドショーで表示したい」とふと思いつきまして、作成に挑戦してみることにしました。
かなり手こずったものの、思い描いていたようなスライドショーをなんとか形にすることができたので、備忘録として以下にコードなどを載せておこうと思います。
目次
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=""><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のカプセル化というものをしないと動かないので、これもまた手こずりました。
こちらのコードも一緒に載せようかと思っていたのですが、かなり長くなってしまうので別の記事にしました。
こちらの記事ともども、スライドショーを作成したい方のご参考になりましたら幸いです。
folder Web関連
tag スライドショー
