Blog

jQueryプラグイン「bxSlider」がレスポンシブ対応になってた

title

以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、
最近バージョンアップされ、機能もパワーアップされてました。
サイト自体もリニューアルされ、今風になっていました。

それに伴い、今回新しく記事にすることにしました。

以前の記事は以下になります。

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

今回のバージョンアップした点は以下になります。
・レスポンシブに対応
・スワイプが可能(スマートフォン)
・cssが付いているので、cssの設定が楽になった
・コントロールの画像等も付いている
・カルーセルの設定も変更に(プラグインで設定する)

 

今回もDEMOを作成しましたが、
レスポンシブになった箇所以外は、あまり以前のと変わってはいません。

DEMO

それでは簡単にではありますが、使い方です。

 

bxSliderの使い方

まずは、プラグインサイトからダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider

次に、head部分に以下の記述をします。

そしてさらに

とします。

あとは、htmlを、

とすれば基本的にはOKです!

あとは細かい調整はcssでお好みにして、
機能を追加したい場合は、オプションをつけて下さい。

一部のオプションを紹介します。

もっと知りたい方は、
こちらをどうぞ!

 

一応DEMOの設定を紹介させて頂きます。

今回cssがあることで、特に設定しなくてもいいのですが、
余計なcssがあったりもします。
DEMOではそのままなんですが、スライダーの枠にシャドウがかかっています。
これはデザイン上いらないことも多いと思うので、
その場合、jquery.bxslider.cssの以下の部分、

を削除か調整すればOKです。

 

1.ページャー、戻る・次へボタン付き

 

2.サムネイルのページャー付き,イージング効果

 

3.カルーセルスライダー

カルーセルスライダーの場合、

slideWidth
minSlides
maxSlides

の設定は必須だそうです。

そしてカルーセルスライダーの横幅は、
親の要素のwidthか、slideWidth × maxSlidesとなるようです。

上記の場合は、600pxになるはずですが、620pxになっています。
slideMarginの値も関係あるようです。
(10にしたら、610pxになりました。)

正直カルーセルについては、あまりよくわかりませんでした。。。
思い通りにするためにはちょっと工夫が必要そうです。

 

とはいえ、スライダーとしては、
今一番と言っていいほど、お奨めです。

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ