bxSliderを使用したレスポンシブカルーセル
レスポンシブなカルーセルを実装する時に、bxsliderを使用すると楽に実装できる。
jQuery Content Slider | Responsive jQuery Slider | bxSlider
使用するには上記リンクより必要なjs、cssをダウンロードし、
ソース内で読み込む。
以下にサンプルコードと、スライド画像の中央寄せの設定、
さらにデフォルトで画像の下に配置されているページャー(画像の選択ボタン)を、
画像のサムネイルに変更するための設定を記載する。
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="cur/jquery.bxslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // bxSliderの設定 $('.slider').bxSlider({ mode: 'fade', pager: true, // サムネイルの設定 pagerCustom: '.bx-pager', // 左右のボタンの削除 controls: false, preladImages: 'all' }); }); </script> </header> <body> <!-- スライド対象の画像 --> <ul class="slider"> <li><img src="cur/img/pic01.jpg" /></li> <li><img src="cur/img/pic02.jpg" /></li> <li><img src="cur/img/pic03.jpg" /></li> <li><img src="cur/img/pic04.jpg" /></li> </ul> <!-- サムネイル --> <div class="bx-pager"> <a data-slide-index="0" href=""><img src="cur/img/pic01.jpg" /></a> <a data-slide-index="1" href=""><img src="cur/img/pic02.jpg" /></a> <a data-slide-index="2" href=""><img src="cur/img/pic03.jpg" /></a> <a data-slide-index="3" href=""><img src="cur/img/pic04.jpg" /></a> </div> </body> </html>
/* デフォルトからの変更点のみ記載 */ /* スライドの画像の設定 */ .bx-wrapper img { /* 画像のサイズ設定と中央寄せの設定 */ width:500px; height:400px; max-width:100%; display: block; margin:0 auto; } /* スライド下部のサムネイル画像のサイズ設定 */ .bx-pager a img { width:80px; height:60px; opacity: 0.5; filter: alpha(opacity=100); }