jQuery cycle2 廣告輪播 多個一組

廣告輪播， 3 個一組。

程式碼原創

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<style>
.pditem{
    width:200px;
    height:100%;
    border:thin solid green;
    float:left;
    margin-right:5px;
}
.pditem:last-child{
    margin-right:0px;
}

</style>

<div id="myslide" class="cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="2000"
    data-cycle-slides="> div"
    style="border:thin solid red; width:710px;">
    <div style="height:190px; border:thin solid blue; padding:5px; margin:5px;">
        <div class="pditem">111</div>
        <div class="pditem">111</div>
        <div class="pditem">111</div>
    </div>
    <div style="height:190px; border:thin solid blue; padding:5px; margin:5px;">
        <div class="pditem">222</div>
        <div class="pditem">222</div>
        <div class="pditem">333</div>
    </div>
    <div style="height:190px; border:thin solid blue; padding:5px; margin:5px;">
        <div class="pditem">333</div>
        <div class="pditem">333</div>
        <div class="pditem">333</div>
    </div>
</div>

<div>
    <a href=# id="prev">Prev</a>
    <a href=# id="next">Next</a>
</div>

<script>
$('#prev').click(function () {
    var n = $('#myslide > div').size() - 1; // 程式會自動加一個同級元素，所以要減1才是真正的個數
    var c = $('#myslide').data("cycle.opts").currSlide; // 用此方法取得的索引是正確的，不用減1
    //alert(n + ', ' + c);
    if(c == 0){
        $('#myslide').cycle(n-1);
    }else{
        $('#myslide').cycle('prev');
    }
});
$('#next').click(function () {
    var n = $('#myslide > div').size() - 1; // 程式會自動加一個同級元素，所以要減1才是真正的個數
    var c = $('#myslide').data("cycle.opts").currSlide;
    //alert(n + ', ' + c);
    if(n==(c+1)){
        $('#myslide').cycle(0);
    }else{
        $('#myslide').cycle('next');
    }
});
</script>

預設的 next 動作是依序往右滑動，即使到了最後一組也一樣是往右滑動，只是內容是第1組。但是這樣可能不容易得知已經到底了。

上面是改良後的程式碼。按下 next 往右滑動到最後 1 組的時候，會變成往左滑動到第1組。

後記：
prev 跟 next 按鈕一直無法改成自己想要的樣式，後來改使用 slick 。

其它參考
如果只有一個(組)的時候，取消前後控制項
jquery marquee
bxSlider
WOW Slider 
slick
How to style prev/next arrows button? (slick)
Image generated from CSS content code (跟 Font Awesome 有關)