jQuery bxslider 前後のスライダーを表示したままでの中央表示とCallback APIを使った表示選択中のスライド操作

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。利倉です。今回のTipsは【jQuery bxslider 前後のスライダーを表示したままでの中央表示とCallback APIを使った表示選択中のスライド操作】です。文章にするとちょっとわかりにくいのですが、ウィンドウサイズを超えたスライダーを中央に配置することで前後(左右)のスライダーが画面外に見切れて待機している状態を作成します。こうすることコンテンツが沢山ある!という明示にもなりますのでご活用頂ければと思います。

目次

  1. 前後のスライダーを表示
  2. スライダーをセンタリング
  3. さまざまなCallback
  4. Callbackを利用して中央のスライダーにクラスを追加

前後のスライダーを表示

はじめは「前後のスライダーを表示したままでの中央表示」です。bxsliderに用意されている表示枚数の最小(minSlides)と表示枚数の最大(maxSlides)、そしてスライド切り替えを何枚ごとに行うかを設定するmoveSlidesを使用します。デモではスライダーを【左|中央|右】のような表示にするために最大最小は3、切り替え何枚は1と設定しています。

読み込むファイル
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.bxslider.js"></script>

DEMO1

スライダーをセンタリング

ただし、上記の状態ではスライダーが左寄せのままです。そこでいくつか親要素を追加し、ネガティブマージンを駆使してセンターへと移動させます。

DEMO2

HTML
<div class="container">
<div class="slide_all">
<div class="slide_wrap">
<div class="slide_body">
<div class="slide"><img src="images/new1.jpg"></div>
<div class="slide"><img src="images/new2.jpg"></div>
<div class="slide"><img src="images/new3.jpg"></div>
</div>
</div>
</div>
</div>
CSS
/* リセット */
* {margin: 0; padding: 0;}
body,html {width: 100%;height: 100%;}

/* 設定 */
.container {width: 100%; height: 100%; overflow-x: hidden;}
.slide_all {width: 800px; margin: 0 auto; height: 250px; position: relative;}
.slide_wrap {width: 2400px; position: absolute; left: 50%; margin-left: -1200px;}
.slide_body {width: 100%;}
.slide {width: 800px;}
.slide img {width: 100%; vertical-align: bottom;}

/* 装飾 */
.bx-controls-direction,.bx-pager {text-align: center;height: 25px;}
.bx-controls-direction a,.bx-pager-item {display: inline-block;}
.bx-pager-item a{display: block; height: 10px; width: 10px; text-indent: -9999px; background: #000; border-radius: 10px; margin:10px 2px 0 2px;}
.bx-pager-item a.active {opacity: 0.3;}
.bx-controls-direction a{text-decoration: none; color: #000; padding:0 5px;}
.bx-controls {position: absolute;bottom: 5px;z-index: 100;width: 100%;}

JS
$(function(){
$(‘.slide_body’).bxSlider({
slideWidth: 800,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0
});
});

さまざまなCallback

ここでは選択中(現在中央にいる要素)に対してクラスを付与したり、なんらかの操作をおこなう為にbxsliderに用意されているさまざまなCallbackについて触れておきます。
 

Callbacks 概要 引数 引数概要
onSliderLoad:function(currentIndex){…} スライダー読み込み完了後に実行 currentIndex 現在のスライドの要素のインデックス数
onSlideAfter:function($slideElement, oldIndex, newIndex){…} スライド遷移の直前に実行 $slideElement スライドする要素
oldIndex 前のスライドのインデックス数
newIndex 次のスライドのインデックス数
onSlideBefore: function($slideElement, oldIndex, newIndex){…} スライド遷移の直後に実行 $slideElement スライドする要素
oldIndex 前のスライドのインデックス数
newIndex 次のスライドのインデックス数
onSlideNext: function($slideElement, oldIndex, newIndex){…} NEXTによるスライド遷移の直前に実行 $slideElement スライドする要素
oldIndex 前のスライドのインデックス数
newIndex 次のスライドのインデックス数
onSlidePrev: function($slideElement, oldIndex, newIndex){…} PREVによるスライド遷移の直前に実行 $slideElement スライドする要素
oldIndex 前のスライドのインデックス数
newIndex 次のスライドのインデックス数

DEMO3

詳細は公式のDOCをご確認ください。

Callbackを利用して中央のスライダーにクラスを追加

最後にCallbackを利用して選択中(中央にある)スライドにactiveというクラスを追加します。CSSアニメーションを使ってactiveの有無で任意の操作を加える事が可能です。使用するCallbackはonSlideBeforeですが、ここでの注意は中央にある要素にクラスを追加する点です。

DEMO4

HTML
<div class="container">
<div class="slide_all">
<div class="slide_wrap">
<div class="slide_body">
<div class="slide">7</div>
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
</div>
</div>
</div>
</div>
CSS
/* リセット */
* {margin: 0; padding: 0;}
body,html {width: 100%;height: 100%;}

/* 設定 */
.container {width: 100%; height: 100%; overflow-x: hidden;}
.slide_all {width: 800px; margin: 0 auto; height: 250px; position: relative;}
.slide_wrap {width: 2400px; position: absolute; left: 50%; margin-left: -1200px;}
.slide_body {width: 100%;}
.slide {width: 800px; font-family: ‘arial’; background: #000; color: #fff; font-size: 50px; line-height: 250px; text-align: center;}
.slide img {width: 100%; vertical-align: bottom;}

/* 装飾 */
.bx-controls-direction,.bx-pager {text-align: center;height: 25px;}
.bx-controls-direction a,.bx-pager-item {display: inline-block;}
.bx-pager-item a{display: block; height: 10px; width: 10px; text-indent: -9999px; background: #fff; border-radius: 10px; margin:10px 2px 0 2px;}
.bx-pager-item a.active {opacity: 0.3;}
.bx-controls-direction a{text-decoration: none; color: #fff; padding:0 5px;}
.bx-controls {position: absolute;bottom: 5px;z-index: 100;width: 100%;}

/* 追加 */
.slide{transition:all .3s;opacity:.8;}
.slide.active{ opacity:1;}

JS

$(function(){
var slideNum = $(‘.slide’).size();
$(‘.slide_body’).bxSlider({
slideWidth: 800,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
onSliderLoad:function(currentIndex){
$(‘.slide’).removeClass(‘active’);
$(‘.slide_body > div:nth-child(3n-1)’).addClass(‘active’);
},
onSlideBefore: function($slideElement, oldIndex, newIndex){
var new_i = newIndex%3 – 1;
var nth = (new_i < 0) ? '3n-1' : '3n'+new_i; $('.slide').removeClass('active'); $('.slide_body > div:nth-child(‘+nth+’)’).addClass(‘active’);
}
});
});

 
以上になります。
 
参照:Options | Responsive jQuery Slider | bxSlider