jQueryのプラグインbxSliderで今風のスライドショー作っちゃうぜ

日頃よりjQuery先生にはお世話になっています。

先日は、ページ内リンクがスムーズに動き、URLにも#TOPとかが残らない例のスマートなやつをjQueryプラグインのsmoothScrollで実装。
（※最初うまく動かなくて焦ったが、原因はリンクの大文字小文字の区別が問題という初歩的なミスだった…）

今回は、これまたいろんなサイトでよく見るスライドが自動的に切り替わり、しかも矢印ボタンでユーザーが切り替えることもできるという例のあれを実装してみることに。

調べてみると、どうやらbxSliderというjQueryプラグインがあるそうな。

よく見てみると、このbxSliderを使っているサイトの多いこと多いこと。
東京マラソンのサイトもこれ使ってる。

bxSliderのオフィシャルサイトに書いてある指示にしたがって実装してみると、、、、おっそろしく簡単に動く動く。
いやー、こんな素晴らしく便利なものが無料で提供されているとは。ありがたやー。

自動での画像の切り替えも

[js]auto: true,[/js]
[js]auto: false,[/js]

で簡単にオンオフを切り替えられるし

切り替えスタイルもフェードにしたり、

[js]mode: ‘fade’,[/js]

横スライドにしたり

[js]mode: ‘horizontal’,[/js]

と簡単に、自由自在に変えられる。

お手軽かつ便利すぎるでしょ、君！

唯一個人的に困ったところは、前回のエントリーで書いた「CSSで作ったプルダウンメニュー」とスライド画像が重なる部分で、プルダウンメニューが表示されなくなってしまった点。

しかし、これもz-indexの値を指定して難なく問題解決。
今のところ、bxSliderの出来に大満足しております。