• ホーム
  • WEB/デザイン
  • jQueryスライドショープラグイン「bxSlider」がとりあえずコレ!的な感じで素晴らしい

jQueryスライドショープラグイン「bxSlider」がとりあえずコレ!的な感じで素晴らしい

2015.03.13 WEB/デザイン , , ,


だいぶ春めいて来たんですが朝晩は寒くてマフラーしてるし日中は暑いし、そんな感じで花粉と戦いながら過ごしています。

突然ですが皆さまサイト構築の際スライドショーを実装することが多いかと思うのですが、どんなプラグインをお使いでしょうか。
タイトルの通りなのですがここしばらく私個人的に「bxSlider」にお世話になりまくっておりまして頭が上がらない状況です。

bxSliderとは

bxslider

冒頭で書いた通り、jQueryを使用したスライドショープラグインです。

取り立てて特殊なものでない限り、私は迷わずこれを使っています。

  • 設置が超簡単
  • シンプルかつ多機能
  • レスポンシブ

といった感じで悪いところが見つかりません。
あくまで個人的にですが、非常に使い勝手の良いプラグインではなかろうかと。初心者の方にも良いと思います。

とりあえず設置してみるぜよ

何はともあれ設置してみれば良さが分かるわ!みんな分かってくれるはずだわ!
ダウンロードはこちらからでっす!jQuery Content Slider | Responsive jQuery Slider | bxSlider

STEP1 : 必要なファイルを読み込みます

ダウンロードしましたらば解凍をしまして、必要なファイルを読み込みましょう。
“images”なるフォルダもありますので、デフォルトで用意されている画像を使いたい方はCSSと同じ階層にブチ込んでください。

jQuery本体も忘れず召喚してください。

ちなみにCSSは無くてもオッケーです。自分でカスタマイズするのも良しですね。

STEP2 : HTMLを書き書きします

スライドさせたいところにHTMLを書きます。なに?書けない?大丈夫です、書きましょう。

オフィシャルのページの通り書き書きしました。
ここではulとliでマークアップしていますが、divとかそんなんでもいけますし、画像じゃなくてテキストなんかもいけますよ。

STEP3 : bxSlider先生をお呼びします

そうしましたらいよいよ先生の登場です。どうぞ!

先ほど振ったclassを指定して呼び出します。
以上、設置完了!

ちなみにオプションを使う時は

こうですね。これでスピードを変えたり、自動スライドにしたりといろんなことができます。

サンプルを作ってみました

さてさてどうでしょう、こんなに簡単なんだぜ・・・
というわけでこのまま終わるのもアレかと思いまして自分なりにサンプルをば作成しましたので何かしら参考になるようであれば嬉しいです。ならないようであればまあそれは仕方ないですね。

ちなみに冒頭で少し触れましたがサンプルは全てレスポンシブになっております。スワイプ操作もできますよ。
特に設定なども必要なく、これがまた良いでございますね~

ほぼデフォルト状態での実装

サンプルを見る

スライドの幅だけ指定して、その他はデフォルトの状態です。

自動スライド・キャプション表示

サンプルを見る

こちらはスライドを自動にして、それぞれの画像にキャプションを付けたものです。
キャプションは下のオプションと、<img>タグの中にtitleを書けばよかですよ。

カルーセル表示

サンプルを見る

こんなのもいけます。
私はECサイトなんかで新着商品とか、人気商品を並べるのに使ってます。

これはスライドのスピードなんかも変更してますので、その辺は適宜調整をばすれば良いかと。

テキストコンテンツをタブ風に表示

サンプルを見る

最後はこちら。
いわゆるタブというやつをスライドショープラグインで作るという何だかどうなのかよくわからないサンプルです。
bxSliderはサムネイルのページャーを自動で実装したりという機能はないのですが、その代わり(?)pagerCustomというオプションで好き勝手に実装できます。

2枚目のスライドが最初に出てきちゃうよ問題

ちなみにこのbxSliderをたくさん使っているうちに上記のような問題が出て参りました。
それぞれ状況はいろいろだと思いますが、私は<img>タグにきちんとwidthとheightを指定してやったところ解消いたしました。

というわけでjQueryスライドショープラグイン「bxSlider」のご紹介でありました。
迷った際はぜひお試しあれ。

地方都市の片隅に生息する音楽好きウェブデザイナーです。
2,3ヶ月に1度のペースで部屋を改造したい欲望に駆られる持病を持っています。趣味はビールを飲みながら料理をすること。