jQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替える!

2014/08/05

こんにちは。
今回はjQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替えるです!

「bxSlider」はレスポンシブにも対応していていろいろなオプションがあります。
今回はその中の画像をフェードイン・フェードアウトで入れ替えたいと思います。

jQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替える!

ダウンロード

下記のサイトの右上の「Downloas」のボタンをクリックしダウンロードします。

bxSlider_fade

jQuery Content Slider | Responsive jQuery Slider | bxSlider

 

設置してみよう!

ダウンロードしたファイルのjquery.bxslider.min.jsとjquery.bxslider.cssとimagesを設置します。
jquery.bxslider.cssをhead内に読み込ませます。

 

jQuery本体、jquery.bxslider.min.jsを/bodyの手前に読み込みます。

 

画像部分をマークアップします。

 

ノーマル

bxSliderのノーマルの設定をします。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

DEMO

 

画像をフェードイン・フェードアウトで入れ替える

画像をフェードイン・フェードアウトで入れ替える設定をします。
jquery.bxslider.min.jsの下に下記のスクリプトを記述します。

DEMO

 

その他のオプションは下記のページをご覧下さい。

jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ!

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。いろいろなオプションを試してみてはいかがでしょうか
以上でjQueryプラグイン「bxSlider」で画像をフェードイン・フェードアウトで入れ替えるでした。

topへ戻る