jQuery Cycle2 Plugin

Shows how to develop a custom pager for the plugin. Update to fix sequence.

by Brunno Romero

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<div class="cycle-slideshow" data-cycle-fx="fadeout" data-cycle-auto-height="4:3" data-cycle-delay="-1500" style="height: 222px; overflow: hidden;">    
    <img src="http://malsup.github.io/images/p1.jpg" data-cycle-fx="tileBlind" class="first cycle-slide">
    <img src="http://malsup.github.io/images/p2.jpg" class="cycle-slide">
    <img src="http://malsup.github.io/images/p3.jpg" data-cycle-fx="tileBlind" class="cycle-slide">
    <img src="http://malsup.github.io/images/p4.jpg" class="cycle-slide cycle-slide-active">        
</div>

<div class="my-pager"> 
 <span class="pg-0">ONE</span>
 <span class="pg-1">TWO</span>
 <span class="pg-2">THREE</span>
 <span class="pg-3">FOUR</span>
</div>

CSS

span.cycle-pager-active {
    background-color: #ff0;
}
.cycle-slideshow, .cycle-slideshow img {
    width: 500px;
}
.my-pager span {
    display: inline-block;
    width: 100px;
    border: 1px solid gray;
    padding: 4px;
    margin: 3px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

JavaScript

$(function () {
    var index = -1;
    $('div.cycle-slideshow').on('cycle-before', function () {
        var elm = arguments[3];
        index = (index == -1) ? 0 : $(elm).index();
        $('div.my-pager span.cycle-pager-active')
            .removeClass('cycle-pager-active');
        $('div.my-pager span').eq(index)
            .addClass('cycle-pager-active');
    })
        .trigger('cycle-before');
    $('div.my-pager span').on('click', function () {
        var index = $(this).index();
        $('div.cycle-slideshow').cycle('goto', index);
    });
});