jQueryを使ってのスライダーってTOPページのメインビジュアルが基本ですが、それはフェード系やダイナミックなアニメーションが主流だった頃の話で、前後左右の画像を表示しつつスライドするカルーセルスライダーが出始めて、メインビジュアルだけでなくコンテンツバナーを複数表示させて左右にスライドするタイプの物がTOPのメインだけでなくサブコンテンツ部分にも多く見られてきてます。
今回とあるコンテンツ量の多いポータルサイトを作成した時にそのタイプのスライダーを作成したので備忘録としてまとめておきます。

どんな感じのスライダーかっていうと、bxSliderの本家サイトにあるサンプル「Carousel – dynamic number of slides」のような感じです。

まず、bxSliderをダウンロードして準備

まず、「bxSlider」の本家サイトからDownloadします。
ダウンロードすると何やらいっぱい梱包されてますが、使用するのは「jquery.bxslider.min.js」と「jquery.bxslider.css」のみ、jQueryの本体はGoogleから引っ張ってきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="css/jquery.bxslider.css" />

そして、head内に以下のscriptを追加

$(document).ready(function(){
  $('.bxslider').bxSlider({
  auto: true,//自動切り替えの有無
  pause:6000,//停止時間※デフォルトは4000
  speed:1000,//動くスピード※デフォルトは500
  minSlides: 3,//一度に表示させる画像の最小値
  maxSlides: 4,//一度に表示させる画像の数
  slideWidth: 160,
  slideMargin: 10,
  pager: true,
  prevText: '＜',
  nextText: '＞',
});
});

HTML は一般的なリスト表示＜ul＞で、class名と先にhead内に記述したclass名は同じで

<div id="slide_space">
<ul class="bxslider">
<li><a href="#"><img alt="" src="img/img01.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img02.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img03.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img04.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img05.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img06.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img07.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img08.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img09.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img10.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img11.jpg" /></a></li>
<li><a href="#"><img alt="" src="img/img12.jpg" /></a></li>
</ul>
</div><!-- /#slide_space -->

梱包されてる「jquery.bxslider.css」を編集

bxsliderに梱包されているCSSはそのままで、すぐ実装できるんですが、「Next」と「Prev」のボタンは両サイドの画像にかぶる状態でposition指定されているし、Background画像なのでテキストデータは「text-indent: -9999;」で非表示になっています。

なんで、以下のよう感じでカスタマイズしました。

.bx-wrapper {
     position: relative;
     margin: 0 auto 30px;
     padding: 0;
     *zoom: 1;
     height:120px;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
     position: absolute;
     width: 100%;
}

/* Pager部分 */

.bx-wrapper .bx-pager {
     text-align: center;
     font-size: .85em;
     font-family: Arial;
     font-weight: bold;
     color: #666;
     padding-top: 5px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
     display: inline-block;
     *zoom: 1;
     *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
     background: #fba4c1;
     text-indent: -9999px;
     display: block;
     width: 10px;
     height: 10px;
     margin: 0 5px;
     outline: 0;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}


.bx-wrapper .bx-pager.bx-default-pager a.active {
     background: #de094f;
}

/*「Next」と「Prev」 */

.bx-wrapper .bx-prev {
     left: -30px;
     padding-left:5px;
}

.bx-wrapper .bx-next {
     right: -30px;
     padding-left:5px;
}

.bx-wrapper .bx-prev:hover {
     background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
     background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
     position: absolute;
     outline: 0;
     width:20px;
     height: 120px;
     top:0;
     text-decoration: none;
     line-height: 120px;
     font-size: 15px;
     color:#898989;
     z-index: 9999;
     background: #dcdcdc;
}

.bx-wrapper .bx-controls-direction a.disabled {
     display: none;
}

「Next」「Prev」を押すと自動再生が止まるのを制御する

「bxSlider 」はデフォルトでは「Next」と「Prev」を一回クリックすると。自動再生が停止する仕様になっています。
この自動再生を停止させなくしたい場合はscriptを以下に変更する必要があります。

$(document).ready(function(){
  var obj = $('.bxslider').bxSlider({
  auto: true,//自動切り替えの有無
  pause:6000,//停止時間※デフォルト：4000
  speed:1000,//動くスピード※デフォルト：500
  minSlides: 3,
  maxSlides: 4,
  slideWidth: 160,
  slideMargin: 10,
  pager: true,
  prevText: '＜',
  nextText: '＞',
  onSlideAfter: function () { obj.startAuto(); }
});
});

class名を指定する所の最初に「var obj」を追加して、スライダーの設定の一番最後の部分に「 onSlideAfter: function () { obj.startAuto(); }」を追加します。

これで、完成です。

DEMO

まとめ

メインビジュアルの部分というよりもページ中のコンテンツ内に表示させるのがぴったりなタイプのミニサイズのスライダーって感じです。増える可能性のあるピックアアップコンテンツが多いポータルサイトとかに有効なレイアウトですかね？乱発しすぎても見てもらえない可能性があるので、用途を守った使用が大事かなと。今回は以上ですm(_ _)m