bxSlider サムネイルカルーセルに選択中とわかる表示にする

選択項目をアニメーションして切り替える

サムネイルカルーセルに「選択中とわかる表示」にして、スライドが行われたらアニメーションして「選択が切り替わる」という実装をしました。

サンプルを確認する

See the Pen bxslider-move-current01 by RECOOORD (@recooord) on CodePen.

上記のサンプルを確認してください。
今回ご紹介するのは、このようなスライドアニメーションとなります。

HTML

<div class="container">
  <div class="slider">
    <!-- スライダーを配置 -->
    <ul>
      <li><img src="http://mias.kilo.jp/material/photo/img01.jpg" alt=""></li>
      <li><img src="http://mias.kilo.jp/material/photo/img02.jpg" alt=""></li>
      <li><img src="http://mias.kilo.jp/material/photo/img03.jpg" alt=""></li>
      <li><img src="http://mias.kilo.jp/material/photo/img04.jpg" alt=""></li>
    </ul>
  </div>
  <div class="pager">
    <!-- サムネイルカルーセルを配置 -->
    <span class="current"></span>
    <!-- ページャーを配置 -->
    <ul>
      <li><a data-slide-index="0" href="#"><img src="http://mias.kilo.jp/material/photo/img01.jpg" alt=""></a></li>
      <li><a data-slide-index="1" href="#"><img src="http://mias.kilo.jp/material/photo/img02.jpg" alt=""></a></li>
      <li><a data-slide-index="2" href="#"><img src="http://mias.kilo.jp/material/photo/img03.jpg" alt=""></a></li>
      <li><a data-slide-index="3" href="#"><img src="http://mias.kilo.jp/material/photo/img04.jpg" alt=""></a></li>
    </ul>
  </div>
</div>

通常のスライダーを配置し、サムネイルカルーセルとページャーのタグを配置する。

SCSS

.bx-wrapper{
  border: none;
  box-shadow: none;
  margin: 0;
}
.container{
  display: flex;
  background: #000;
}
.slider{
  width: 50%;
  ul{
    li{
      img{
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }
}
.pager{
  position: relative;
  width: 50%;
  ul{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 50%;
      a{
        img{
          display: block;
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
/*選択中の枠のスタイル*/
.current{
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #f00;
  transition: .5s;
}

スライダーのレイアウトと、選択中の枠のスタイルを記述する。
レスポンシブ対応にしたいので幅と高さはjQueryのほうで指定します。

jQuery

$(document).ready(function(){
  $('.slider ul').bxSlider({
    auto: true,
    pager: true,
    pagerCustom: '.pager',
    onSliderLoad: function() {
      //選択中の枠の幅と高さを指定
      var w = $('.pager li').width(),
          h = $('.pager li').height();
      $('.current').outerWidth(w).outerHeight(h);
      
      $(window).on('resize',function(){
        //選択中の枠の幅と高さを指定
        var w = $('.pager li').width(),
            h = $('.pager li').height();
        $('.current').outerWidth(w).outerHeight(h);
        
        //選択中の枠のポジションを指定
        var off = $('.pager .active').eq(0).position(),
            t = off.top,
      			l = off.left;
        $('.current').css({
          top : t,
          left: l
        });
      });
    },
	  onSlideBefore: function($slideElement, oldIndex, newIndex) {
      //選択中の枠のポジションを指定
      var off = $('.pager li').eq(newIndex).position(),
            t = off.top,
      			l = off.left;
      $('.current').css({
        top : t,
        left: l
      });
    }
  });
});