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化させて完了です。