読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

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

jQuery プラグイン スマートフォン対応 レスポンシブWebデザイン
Sponsored Links

画像のスライドショーだけでなく、コンテンツスライダーとしても使えるカルーセルスライダーの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>

オプションの指定やヘルパーの使用でより細かく指定、設定を変更できそうです。

CSSを自分でしっかり記述する必要はありますが、そのぶんページネーションのデザイン等、細かく自分で決められますし、プラグインの導入自体は手軽なのでとても便利、使い勝手がいいと感じました。