JQueryスライドショーライブラリbxSliderの実装(レスポンシブ対応)

JQueryスライドショーライブラリbxSliderを実装していきます。

ライブラリのダウンロード

まずは公式サイトからbxSliderライブラリをダウンロードします。

ライブラリの読込み

以下のコードをHTMLに貼り付け、JQueryとダウンロードしたライブラリの読込みを行います。

スライド部のHTML

スライド部には以下のようにHTMLを記載します。

JQueryでのライブラリ読込み

bxSliderメソッドを呼び出します。
以下のようにJavaScriptコードを記載します。

オプション

オプションは公式サイトに記述してある通りですが、
たくさんあるので、今回使うオプションだけ解説します。

デモ

実際にbxSliderを使用した動物の写真のスライドのデモです。

追記

bxSliderで画像が中央に表示されない場合があるようです。
色々試したところ、以下のようにCSSを記述するとbxSliderで画像が中央に表示されました。


PAGE TOP