[ プログラミング ] bxsliderを使って、カルーセルタイプのスライドを画面いっぱいに並べる方法

高機能なスライドショーを設置できるjQueryプラグインであるbxSliderをお仕事で使うことがあったので、メモです。画像を3つ横並びにして、左右の画像にフィルター(マスク)をかけるタイプにしてみました。

この手のタイプのスライドショーは自作したことがありますのでそちらもご参考ください。

スクリプトの詳細などは、こちらから

デモは以下からどうぞ。

DOMO

コードが少し長いので、HTMLとCSSを分けます。

別途必要な物は、jQuery本体と、bxsliderのプラグインです。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bxsliderを使って、カルーセルタイプのスライドを画面いっぱいに並べる方法</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function(){
    var slide = $('#slider ul').bxSlider({
        slideWidth  : 1000,
        slideMargin : 20,
        controls    : true,
        auto        : true,
        minSlides   : 3,
        maxSlides   : 3,
        moveSlides  : 1,
        speed       : 1000,
        pause       : 5000,
        onSlideAfter: function(){
            slide.startAuto();
        }
    });
});
</script>
</head>
<body>
<div id="slider">
<div id="sliderInner">
<ul>
<li><a href="index.html"><img src="images/photo04.jpg" alt="" width="1000" height="250"></a></li>
<li><a href="index.html"><img src="images/photo01.jpg" alt="" width="1000" height="250"></a></li>
<li><a href="index.html"><img src="images/photo02.jpg" alt="" width="1000" height="250"></a></li>
<li><a href="index.html"><img src="images/photo03.jpg" alt="" width="1000" height="250"></a></li>
</ul>
<div id="slideFilterL"></div>
<div id="slideFilterR"></div>
</div><! --/#topSlider -->
</div><! --/#topSliderWrapper -->
</body>
</html>

詳しくは説明しませんが、注意点としては、スライド画像の1番目に記述したものが1番左の画像になります。そのため、真ん中の画像を1番目にしたい場合は、最後のスライド画像を最初に持ってきてください。

37行目のように、『<div id=”slideFilterL”></div>』『<div id=”slideFilterR”></div>』というようにフィルター(マスク)用のブロック要素を用意します。

続いてCSSです。結構CSSが難しくて、表示されている3枚分の画像の横幅を指定しないといけなかったりします。また、bxsliderのオプションの『slideMargin』を使って画像の間に余白を空けた場合、その分も含めて横幅を指定しなければなりません。つまり、全体的な横幅は、画像3枚分+slideMarginの余白×2になります。

また、スライドを真ん中に持ってくるために、21行目のように横幅を固定してそれをセンタリングさせた後さらにその半分を左側にずらすという方法をとっています。

左右のナビゲーションの位置も基点は3枚分の画像の1番左になりますので、デモのように真ん中の画像の端に持ってきたい場合は、画像1枚分の値をleftやrightに指定しなければなりません。

CSS

body {
    margin:30px 0;
}

img {
    vertical-align:bottom;
}

ul {
    margin:0;
    padding:0;
}

/* スライドショー */
#slider {
    overflow:hidden;
    position:relative;
    width:100%;
}

#sliderInner {
    position:relative;
    left:50%;
    width:3040px;
    margin-left:-1520px;
}
#sliderInner li {
    width:1000px;
}

#slideFilterL, #slideFilterR {
    position:absolute;
    top:0;
    width:1000px;
    height:250px;
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter:"alpha( opacity=80 )";
    background:#fff;
}
#slideFilterL {
    left:0;
}
#slideFilterR {
    right:0;
}

.bx-wrapper {
    margin:0 auto;
    position:relative;
}

.bx-wrapper .bx-pager {
    margin:0 auto;
    width:1000px;
    background:#fff;
}

/* コントローラー */
.bx-wrapper .bx-prev {
    left:1035px;
    background:url(../images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right:1035px;
    background:url(../images/controls.png) no-repeat -43px -32px;
}

.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;
    top:109px;
    outline:0;
    width:32px;
    height:32px;
    text-indent:-9999px;
    z-index:9999;
}

/* ページャー */
.bx-wrapper .bx-pager {
    padding-top:20px;
    text-align:center;
    font-size:.85em;
    font-family:Arial;
    font-weight:bold;
    color:#666;
}

.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 {
    display:block;
    width:10px;
    height:10px;
    margin:0 5px;
    outline:0;
    text-indent:-9999px;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;;
    background:#666;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background:#000;
}