レスポンシブ＆スワイプ操作に対応したスライダーjQueryプラグイン「bxSlider」

PCでは無限スライダー表示、スマホではスワイプ操作に対応したスライダーになってくれる「bxSlider」は、非常に簡単にサイトへ加えられます。

ファイルの読み込み

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />

ヘッダー内で上記のように読み込みましょう。

1行目はjQueryをCDNで読み込んでいますが、2行目、3行目はダウンロードしたbxSliderパッケージ内のjsファイルとcssファイルを読み込んでいます。

スライダー部分のHTML

<ul class="bxslider">
  <li><a href="***.html"><img src="pic1.jpg" /></a></li>
  <li><a href="***.html"><img src="pic2.jpg" /></a></li>
  <li><a href="***.html"><img src="pic3.jpg" /></a></li>
  <li><a href="***.html"><img src="pic4.jpg" /></a></li>
</ul>

リストに「bxslider」のクラスを付与するのみです。

JavaScript

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

外部JSファイルでもヘッダー内でも良いですが、上記で「bxslider」クラスのリストをbxSlider化させて完了です。