あべゴブログがgoogle newsで配信されることになりました!

フォローよろしくお願いします!

フォロー!

【背景スライダー】bgswitcherの実装方法!【jQuery】

web
スポンサーリンク

皆さんこんばんわ!AbeGoblinです!

今回はjQueryです!bgswitcherっていうですね、スライダーがありましてですねこれが結構便利なもんで。それをご紹介します!
今日はサンプルがあるので流れるように行きますね!

まずはサンプル!!

はい、こうなります!どうでしょう!いい感じですよね!!

じゃ、コードです!

html
<div class="bg_slide"></div>
js
$(".bg_slide").bgswitcher({
  effect: "fade",
  interval: 2500,
  images: ["画像のパスその1",
           "画像のパスその2",
           "画像のパスその3",
           "画像のパスその4"]
});
はいこうですねー!cssは任意に設定してくださいね!特に制限とかもないので思ったようにバシバシ設定しましょう!!
オプションはいろいろとありますので、ここから設定しましょう!!
なにやらいろいろ書いてありますが、大抵デフォルトで何とかなります!!デフォルトが最強!!
ただ、スライダーの紹介ですので、インターバルの時間だけは半分にしています。スライダーだってわかってもらうためにね!!

まとめ

はい!いかがでしたでしょうか!
こういうのはですね、フルスクリーンのメインイメージを作成する際に生きてきますねー!キャッチコピーをど真ん中にドーンっておいてね!
cssも自由に当てることができるので、半分をキャッチコピーに。もう半分をこのスライダーにっていうのもいいかもしれませんね!

はい!それでは今回はこの辺で終わりにしようと思います!それではー(^q^)ノシ