【実用的！】レスポンシブWebデザインに対応したカルーセルjsをjQueryプラグイン化してみた

Web2017年6月28日

先日、レスポンシブWebデザインに対応したカルーセルjsをご紹介させていただきましたが、今回さらに改良して「jquery.carouselRWD.js」としてjQueryプラグイン化してみました。オプションで設定できる機能は絞り、案件でサクッと使いまわすことを考慮して実装したのでわりと実用的に仕上がったと思います。本記事ではこの「jquery.carouselRWD.js」の使い方についてご紹介させていただきたいと思います。

jquery.carouselRWD.jsのダウンロード

未圧縮版と圧縮版の両方をご用意しました。お好きな方をお使いください。MITライセンスです。

jquery.carouselRWD.jsでできること

ある程度実案件に応用できるよう、以前作成した機能をベースに以下の4つのオプションを設定できるようにプラグイン化しました。

アニメーションのスピード
自動スライドの間隔
ループの有り／無し
インジケーターの有り無し

あわせて、複数のカルーセルを同一ページに表示することも可能にしています。

アニメーションのスピード

初期値は500です。お好みでアニメーションのスピードを設定できます。

$(function() {   
    $("セレクタ").carouselRWD({
        $speed:300
    });
});

自動スライドの間隔

初期値は3000（3秒毎）で自動スライドします。以下の様に5000と設定すれば5秒毎に自動スライドするようになります。

$(function() {
    $("セレクタ").carouselRWD({
        $interval:5000
    });
});

ループの有り／無し

$loopFlagの値に「false」を設定することでループしなくなり、最初のアイテムがアクティブになっていれば「前」ボタンが非表示、最後のアイテムがアクティブになっていれば「次」ボタンが非表示となります。

また、ループ無しで自動スライドするというケースは経験上基本的にないと思われるので、自動スライドもオフになるようにしました。

$(function() {
    $("セレクタ").carouselRWD({
        $loopFlag:false 
    });
});

インジケーターの有り無し

デザイン上、インジケーター表示が不要な場合もあると思います。その場合は$indicatorFlagの値をfalseとすることでインジケーターが表示されなくなります。

$(function() {
    $("セレクタ").carouselRWD({
        $indicatorFlag:false    
    });
});

cssはプラグイン化前と変わっているので注意

今回プラグイン化するにあたって、以前のプラグイン化前のものから、セレクタの命名含め若干cssを変更しています。以下のcssおよびhtmlと合わせてお使いください。

css

.carousel{
    position:relative;
    max-width:960px;
    margin:0 auto;
    font-size:0;
    line-height:0;
}

.carousel .carousel-view {
    overflow:hidden;
    position:relative;
}

.carousel .carousel-view .carousel-contents{
    position:relative;
    top:0;
}

.carousel .carousel-view .carousel-contents:after{
    clear:both;
    content:"";
    display:table;
}

.carousel .carousel-view .carousel-contents .item {
    float:left;
    display:inline;
}

.carousel .carousel-view p.prev{
    position:absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
}

.carousel .carousel-view p.next{
    position:absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
}

.carousel ul.list-indicator{
    text-align:center;
    margin-bottom:50px;
}

.carousel ul.list-indicator li{
    display:inline-block;
    margin-right:20px;
    margin-top:20px;
}

.carousel ul.list-indicator li a{
    display:block;
    height:20px;
    width:50px;
    background:#ccc;
}

.carousel ul.list-indicator li.current a{
    background:#ff0000;
}

html

ここでは、class="js-carousel-01"に適用する想定のソースとしています。

<div class="js-carousel-01">
<div class="carousel">
<div class="carousel-view">
<div class="carousel-contents">
<div class="item"><a href="https://yahoo.co.jp/" target="_blank"><img src="http://placehold.jp/333333/ffffff/960x450.png?text=1" alt=""></a></div>
<div class="item"><a href="https://yahoo.co.jp/" target="_blank"><img src="http://placehold.jp/333333/ffffff/960x450.png?text=2" alt=""></a></div>
<div class="item"><a href="https://yahoo.co.jp/" target="_blank"><img src="http://placehold.jp/333333/ffffff/960x450.png?text=3" alt=""></a></div>
</div>
<p class="prev"><a href="#"><img src="https://placehold.jp/80x80.png?text=前" alt="前"></a></p>
<p class="next"><a href="#"><img src="https://placehold.jp/80x80.png?text=次" alt="次"></a></p>
</div>
<ul class="list-indicator">
</ul>
</div>
</div>