こんにちは。
今回はjQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替えるです！
「bxSlider」はレスポンシブにも対応していていろいろなオプションがあります。
今回はその中の画像をフェードイン・フェードアウトで入れ替えたいと思います。
jQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替える！
ダウンロード
下記のサイトの右上の「Downloas」のボタンをクリックしダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider
設置してみよう！
ダウンロードしたファイルのjquery.bxslider.min.jsとjquery.bxslider.cssとimagesを設置します。
jquery.bxslider.cssをhead内に読み込ませます。
1 | <link href="./jquery.bxslider.css" rel="stylesheet"> |
jQuery本体、jquery.bxslider.min.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./js/jquery.bxslider.min.js"></script> |
画像部分をマークアップします。
1 2 3 4 5 6 | <ul class="bxslider"> <li><img src="./images/sample1.jpg"></li> <li><img src="./images/sample2.jpg"></li> <li><img src="./images/sample3.jpg"></li> <li><img src="./images/sample4.jpg"></li> </ul> |
ノーマル
bxSliderのノーマルの設定をします。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 | <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> |
画像をフェードイン・フェードアウトで入れ替える
画像をフェードイン・フェードアウトで入れ替える設定をします。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade' }); }); </script> |
その他のオプションは下記のページをご覧下さい。
jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いろいろなオプションを試してみてはいかがでしょうか
以上でjQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替えるでした。
