iScroll4 Carousel

ベース

HTML

<script src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
<div id="wrapper">
    <div id="scroller">
        <div id="thelist" class="content">
            
        </div>
    </div>
</div>
<div id="nav">
    <div id="prev">&larr; prev</div>
    <ul id="indicator"></ul>
    <div id="next">next &rarr;</div>
</div>

SCSS

body,ul,li {
    padding:10px;
    margin:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}

#wrapper {
    width:300px;
    height:160px;

    float:left;
    position:relative;    /* On older OS versions "position" and "z-index" must be defined, */
    z-index:1;            /* it seems that recent webkit is less picky and works anyway. */
    overflow:hidden;

    background:#aaa;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
    background:#e3e3e3;
}

#scroller {
    width:2100px;
    height:100%;
    float:left;
    padding:0;
}

#scroller .content {
    list-style:none;
    display:block;
    float:left;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    text-align:left;
}

#scroller .item {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    display:block; float:left;
    width:300px; height:160px;
    text-align:center;
    font-family:georgia;
    font-size:48px;
    line-height:160px;
}

#nav {
    width:300px;
}

#prev, #next {
    float:left;
    font-weight:bold;
    font-size:14px;
    padding:5px 0;
    width:80px;
}

#next {
    float:right;
    text-align:right;
}

#indicator, #indicator > li {
    display:block; float:left;
    list-style:none;
    padding:0; margin:0;
}

#indicator {
    width:110px;
    padding:12px 0 0 30px;
}

#indicator > li {
    text-indent:-9999em;
    width:8px; height:8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    background:#ddd;
    overflow:hidden;
    margin-right:4px;
}

#indicator > li.active {
    background:#888;
}

#indicator > li:last-child {
    margin:0;
}

JavaScript

$(function(){
    //div#wrapper
    var $wrapper = $('#wrapper');
    
    //div#scroller
    var $scroller = $('#scroller');
    
    //div#prev(arrow)
    var $prev = $('#prev');
    
    //div#next(arrow)
    var $next = $('#next');
    
    //ui#indicator(●○○)
    var $indicator = $('#indicator');
    
    //div#thelist(content)
    var $content = $('#thelist');
    
    //コンテンツのデータ
    var data = [1,2,3,4,5];
    
    //コンテンツのdivを入れておくための空配列
    var items = [];
    
    //コンテンツアイテム１つあたりの横幅
    //（コンテンツ表示エリアの横幅）
    var itemWidth = parseInt($wrapper.css('width').replace('px', ''));
    
    //初期表示位置（0ベース）
    var current = 2;
    
    
    $.each(data, function(i, dat){
        var $item = $('<div>', {'class':'item', 'text': dat});
        $content.append($item);
        $indicator.append('<li' + (i === current ? ' class="active"':'') + '>');
        items.push($item);
    });
    
    $scroller.css({
        'width': data.length * itemWidth 
    });
    
    var myScroll = new iScroll($wrapper.get(0), {
        snap: true,
        momentum: true,
        x : -itemWidth * current,
        hScrollbar: true,
        onScrollEnd: function () {
            $indicator.find('.active').removeClass('active');
            $indicator.find(':nth-child(' + (this.currPageX + 1) + ')').addClass('active');
        }
     });
    myScroll.currPageX = current;
    
    $prev.on('click', function(){
        myScroll.scrollToPage('prev', 0);
    });
    $next.on('click', function(){
        myScroll.scrollToPage('next', 0);
    });
});