じぶんメモ

プログラミングのメモ、日常のメモとか。

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);
}