[jQuery]カルーセルを作るプラグイン2 – bxSlider.js

前回slick.jsを使ってカルーセルを作成する方法をまとめました。slick.jsではカルーセルの要素数を設定するため、要素幅が可変するタイプのレスポンシブには便利ですが、要素の幅を固定することはできません。要素の幅を指定したカルーセルは、プラグインbxSlider.jsで作成できます。

カルーセルを作るプラグイン2

1.bxSlider.jsを使う準備をする

1.必要なファイルをDL

まず、公式サイトから必要なファイルをDLします。
bxSlider(公式サイト)

DLしたフォルダを解凍し、bxsliderフォルダの中にある次のファイル等をサーバーにUPします。

  • imagesフォルダ
  • jquery.bxslider.css
  • jquery.bxslider.min.js

2.ファイルを読み込む

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

2.左右の要素が見えるカルーセルの作り方

左右の要素が少し見えているタイプのカルーセルです。指定したブラウザの幅に達するまでは幅を変えても、中央要素の幅は変わりません。
DEMO

1.カルーセル用のdivを用意

見かけ上の最後の要素(画像4)から並べます。これは画像1が中央きた時に一つ目のナビゲーションをアクティブとするためです。

もしも画像1から並べてしまうと、最初に表示される3要素は左から「画像1・画像2・画像3」です。これを画像1を中央にする為に、オプションで最初の要素を画像4に指定するとします。すると最初に表示される3要素は左から「画像4・画像1・画像2」となります。しかし、この時ナビゲーションは4つ目がアクティブとなってしまいます。
しかし画像4から記載すれば、ナビの一つ目が画像1を指しているように見せかけることができます。

2.bxSlider.jsを実行する

jsファイルを用意して、bxSlider.jsを実行させます。今回は要素の最大幅を1200pxとしています。

3.CSSで外観を整える

後は、CSSで形を整えるだけです。要素の最大幅を1200px、要素の余白を20pxとしたので、1200px以上のウインドウ幅ではカルーセルの幅を3640(1200*3+40)pxとしています。そのカルーセルを常に画面の中央に配置します。1200以下のウインドウ幅では画面の3倍をカルーセルの幅とすることで1要素のレスポンシブにすることが可能です。