bxsliderで複数のスライダーを設置する方法
WEBサイト制作にかかせないスライダーの中でも、使いやすく初心者向けのjqueryプラグイン「bxslider」。自分も初めて使ったスライダーが「bxslider」でした。WEBサイトを制作していくにつれて、複数のスライダーを設置し、それぞれ別々のオプションを適用したいと思い色々検索してみましたが、明確な情報を見つけることができず苦慮したので、記事にしたいと思います。「bxslider」の実装方法は検索すればたくさん出てきますので、そちらでご覧ください。
まず実現したいサンプルを以下に設置しました。
上部スライダーは画像がフェードして自動スライド、下部スライダーは複数の画像が表示され、コントロールをクリックすることでスライドします。
コードは以下となります。
まずはhtmlから。
スライダーに別々のクラス名を付けるという点が今回のポイントです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="slider1"> <div><img src="XXXX.png"></div> <div><img src="XXXX.png"></div> <div><img src="XXXX.png"></div> <div><img src="XXXX.png"></div></div> <div class="slider2"> <div><img src="XXXX.png"></div> <div><img src="XXXX.png"></div> <div><img src="XXXX.png"></div> <div><img src="XXXX.png"></div></div>
次にhead内のスクリプトです。
先ほど命名したクラス名ごとにスクリプトを作成し、それぞれオプションを割り当てます。jquery本体の読み込みも忘れないようにしてくださいね。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script> $(document).ready(function(){ $('.slider1').bxSlider({auto: true,mode:'fade',slideMargin:0,maxSlides:1,pager:false,controls:false }); });</script> <script> $(document).ready(function(){ $('.slider2').bxSlider({auto: false,mode:horizontal',slideMargin:5,maxSlides:3,pager:false,controls:true,moveSlides:1,slideWidth:220 }); });</script>
あとは好みでCSSを記載すれば完成です。
※スライダー画像のレスポンシブ対応については当記事ではCSSで行っております。皆さんも色々試してみてください！
