peep.carousel

1.設置

Zeptoとpeep.carouselのJS、CSSファイルを読み込む。

<link rel="stylesheet" type="text/css" href="https://github.com/fr-sato/peep.carousel/blob/master/peep.carousel/peep.carousel.css">
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
<script type="text/javascript" src="https://github.com/fr-sato/peep.carousel/raw/master/peep.carousel/peep.carousel.js"></script>

2.HTMLコーディング

カルーセルをdivで囲み、クラスにpeep-carousel、idに任意のIDを振る。

<div id="peep1" class="peep-carousel">
    <ul>
        <li><img src="https://github.com/fr-sato/peep.carousel/raw/master/img/sample01.jpg" width="94" height="94"></li>
        <li><img src="https://github.com/fr-sato/peep.carousel/raw/master/img/sample02.jpg" width="94" height="94"></li>
        <li><img src="https://github.com/fr-sato/peep.carousel/raw/master/img/sample03.jpg" width="94" height="94"></li>
        <li><img src="https://github.com/fr-sato/peep.carousel/raw/master/img/sample03.jpg" width="94" height="94"></li>
        .
        .
        .
    </ul>
</div>

3.プラグイン呼び込み

任意のIDを指定してpeep.carouselを呼び込む。

<script type="text/javascript">
$(function() {
    $('#peep1').peepCarousel();
});
</script>