スマートフォン対応のカルーセルスライダー「CarouFredSel」＠jQueryプラグイン

画像のスライドショーだけでなく、コンテンツスライダーとしても使えるカルーセルスライダーのjQueryプラグイン「CarouFredSel」がとても便利だったので備忘録として残しておきます。（レスポンシブ対応でスマートフォンにも使えます）

高さが異なる要素にも対応しているのがありがたいです。

WordPress向けのものは有料ですが、プラグイン自体はオープンソースでMITライセンスで公開されています。ダウンロードはGitHubから。

via GitHub
https://github.com/gilbitron/carouFredSel

ダウンロードしたzipファイルを展開。スクリプト本体は

jquery.carouFredSel-6.2.1-packed.js

になります。

スマートフォンでスワイプ操作を可能にする等のオプションを利用する場合には「helper-plugins」内のファイルを別途読み込んで使用します。

f:id:showjinx:20160627141830p:plain

デモはこちら
DEMO

デモのHTMLはこんな感じで

<div id="wrapper">
    <ul id="carousel" class="clear">
        <li><img src="img/12.jpg" alt=""></li>
        <li>
            <img src="img/11.jpg" alt="">
            <ul class="info">
                <li><a href="http://tabelog.com/tokyo/A1310/A131004/13091089/dtlmenu/course/" rel="nofollow" target="_blank">ソリッソーレ</a></li>
                <li class="text">
                    <p>文京シビックセンターそばのダイニングバー。</p>
                    <p>1階の立ち飲みスペースなら夕方のハッピアワーが適用されてナイス。</p>
                </li>
            </ul>
        </li>
        <li><img src="img/10.jpg" alt=""></li>
        <li><img src="img/09.jpg" alt=""></li>
        <li><img src="img/08.jpg" alt=""></li>
        <li><img src="img/07.jpg" alt=""></li>
        <li><img src="img/06.jpg" alt=""></li>
        <li><img src="img/05.jpg" alt=""></li>
        <li><img src="img/04.jpg" alt=""></li>
        <li><img src="img/03.jpg" alt=""></li>
        <li><img src="img/02.jpg" alt=""></li>
        <li><img src="img/01.jpg" alt=""></li>
    </ul>
    <ul class="arrow">
        <li><a href="#" id="prev">&lt;</a></li>
        <li><a href="#" id="next">&gt;</a></li>
    </ul>
<!-- / #wrapper --></div>
<div id="pager"></div>

CSSはこちら

h1{
    text-align:center;
}

ul.info .text{
    font-size:0.8em;  
}

ul.info p{
    margin:0 0 0.5em 0;
}


#wrapper {
    border-top: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
}

#carousel li {
    margin: 10px 5px;
    float: left;
}

#carousel li img {
    width:100%; /* fallback */
    max-width:100% !important;
    height:auto !important;
}

.arrow{
    position:relative;
}


#prev{
    position:absolute;
    left:1em;
    top:0;
}

#next{
    position:absolute;
    right:1em;
    top:0;
}

.arrow a{
    text-decoration:none;
    color:#ccc;
}


#pager {
    text-align:center;
    padding:10px;
}

#pager a {
    border: 2px solid #ccc;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
}

#pager a:hover {
    background:#eee ;
}

#pager a span {
    display: none;
}

#pager a.selected {
    background-color: #ccc;
}

jQuery本体とプラグインを読み込みます。この例ではスマートフォンでのスワイプ操作が可能なように、ヘルパーも読み込んでいます。

<script src="jquery-1.12.0.min.js"></script>
<script src="jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="helper-plugins/jquery.touchSwipe.min.js"></script><!-- スワイプ操作を可能にするヘルパー -->
<script>
$(function() {
    $('#carousel').carouFredSel({
        responsive: true,
        swipe:true, // スワイプを可能に
        items: {
            visible: 3 // 一度に見えている枚数（#prev, #nextではこの単位で進む）
        },
        auto: {
            items: 1 // 自動スライドショーで一度に動く枚数
        },
        pagination: {
            container: '#pager',
            // deviation: 1
        },
        prev: '#prev',
        next: '#next'
    });
});
</script>