【JSライブラリ】bxsliderでサムネイル連動して前後スライドが見えて、現在スライドだけ色を変える

今更ながら便利なbxsliderのこと。

さんざん使ってきたが、割と簡単且つ有用且つ良く使うんじゃなかろうかと思うのでメモ。

やりたいこと

サムネイル（今いる位置以外のはグレースケール）
■　□　□

メインスライド（前後微妙に見えてる。今いる位置以外のはグレースケールしてる）
□　■　□

こんな感じ。

手順

１．普通にググってbxsliderをいれる。

２．下記のコードを参考に少しカスタマイズする。

コードは下記。

html

            <!--スマホ用サムネイル-->
            <div class="bx-pager spClass">
                <a data-slide-index="0" href=""><img src="img/sp/thumb_001.png"></a>  
                <a data-slide-index="1" href=""><img src="img/sp/thumb_002.png"></a>  
                <a data-slide-index="2" href=""><img src="img/sp/thumb_003.png"></a>  
                <a data-slide-index="3" href=""><img src="img/sp/thumb_004.png"></a>  
                <a data-slide-index="4" href=""><img src="img/sp/thumb_005.png"></a>  
                <a data-slide-index="5" href="" class="thumb-edge"><img src="img/sp/thumb_006.png"></a>
            </div>
            <!--// サムネイル-->

            <div id="slider" class="hashArea">
                <span class="star"><img src="img/pc/star_r.png"></span>
                <ul id="hairslider" class="slider">
                    <li>
                        <p class="img"><img src="img/pc/arrange1.png" alt="xxxxxxx"></p>
                        <div class="col col-l">
                            <a data-remodal-target="modal_1_1"><img src="img/pc/btn_twitter_small.png"></a>
                        </div>
                        <div class="col col-r">
                            <a data-remodal-target="modal_1_2"><img src="img/pc/btn_instagram_small.png"></a>
                        </div>
                    </li>
・・・・略・・・・・
                <ul>
            </div>

JS

$(function(){
    //スマホのみbxsliderにする
    var winW = $(window).width();
    if(winW <= 640){
        var slider = $('#hairslider').bxSlider({  
            auto: false,  
            pause: 5000,  
            speed: 1000,  
            mode: 'horizontal',  
            prevText: '<',  
            nextText: '>',  
            pager: true,  
            onSliderLoad:function(currentIndex){
                slider.children().eq(currentIndex + 1).addClass('active');
            },
            onSlideAfter:function($slideElement,oldIndex,newIndex){
                slider.children().eq(newIndex + 1).addClass('active');
                slider.children().eq(oldIndex + 1).removeClass('active');
            },
            //easing: 'easeOutBounce',  
            pagerCustom: '.bx-pager'  
        }); 
    }
});

CSS(デフォルトからの追記分)

  .bx-viewport {
    overflow: visible!important; /*追記*/
    margin: 0 auto;  /*追記*/
    width: 80% !important;  /*追記*/
  }
 
  .bx-pager {
    width:80%;
    margin: 0 auto;
    padding:0 0 35px;
  }
  .bx-pager a {
    width: 14%;
    display: inline-block;
  }
  .bx-pager a img {  
    filter: saturate(0);  
    -webkit-filter:saturate(0);   
    -moz-filter:saturate(0);      
    -o-filter:saturate(0);        
    -ms-filter:saturate(0);       
  }  
  .bx-pager a.active img {  
    filter: saturate(100%);  
    -webkit-filter:saturate(100%);
    -moz-filter:saturate(100%);      
    -o-filter:saturate(100%);        
    -ms-filter:saturate(100%);       
  }  

  .bx-wrapper li{
    margin: 0 20px 0 0 !important;
    filter: saturate(0);
    -webkit-filter:saturate(0);   
    -moz-filter:saturate(0);      
    -o-filter:saturate(0);        
    -ms-filter:saturate(0);       
  }
  .bx-wrapper li.active{
    filter: saturate(100%);  
    -webkit-filter:saturate(100%);
    -moz-filter:saturate(100%);      
    -o-filter:saturate(100%);        
    -ms-filter:saturate(100%);       
  }

苦労した事

bxsliderで現在表示中のスライドを取得するのが分からず自作しようとしていたが、
調べたらbxsliderのオプションでonSliderLoadとかあった。。
上記のコードだけで他に変数宣言してないのでbxsliderの変数なのね。
めちゃ便利。

CSSはjquery.bxslider.cssとかが多分パックに入ってるのでその後ろにでも追記したらいいんじゃないかと。