Revolver.js

• Html
• Css
• jQuery
• Mootools

<p class="controls">

    <a class="first" href="#">first</a>
    <a class="previous" href="#">previous</a>
    <a class="goto" data-goto="0" href="#">0</a>
    <a class="goto" data-goto="1" href="#">1</a>
    <a class="goto" data-goto="2" href="#">2</a>
    <a class="goto" data-goto="3" href="#">3</a>
    <a class="goto" data-goto="4" href="#">4</a>
    <a class="goto" data-goto="5" href="#">5</a>
    <a class="next" href="#">next</a>
    <a class="last" href="#">last</a>
    <a class="stop" href="#">stop</a>
    <a class="play" href="#">play</a>
    <a class="pause" href="#">pause</a>
    <a class="restart" href="#">restart</a>

</p>

<div id="my_slider">

    <img class="slide" src="../assets/img/1.png" alt="" />
    <img class="slide hidden" src="../assets/img/2.png" alt="" />
    <img class="slide hidden" src="../assets/img/3.png" alt="" />
    <img class="slide hidden" src="../assets/img/4.png" alt="" />
    <img class="slide hidden" src="../assets/img/5.png" alt="" />
    <img class="slide hidden" src="../assets/img/6.png" alt="" />

</div>

#my_slider {
    width: 720px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

#my_slider .slide {
    left: 0;
    position: absolute;
    top: 0;
}

#my_slider .hidden {
    display: none;
}

var revolver = $('#my_slider').revolver({
        autoPlay: false,
        onReady: function(){
            alert('"onReady" fired.');
        },
        onPlay: function(){
            alert('"onPlay" fired.');
        },
        onStop: function(){
            alert('"onStop" fired.');
        },
        onPause: function(){
            alert('"onPause" fired.');
        },
        onRestart: function(){
            alert('"onRestart" fired.');
        },
        transition: {
            onStart: function(){
                alert('"transition.onStart" fired.');
            },
            onFinish: function(){
                alert('"transition.onFinish" fired.');
            },
            type: 'fade'
        }
    })
    .data('revolver');

var $controls = $('.controls');

$controls.find('.first, .previous, .next, .last, .play, .stop, .pause, .restart').click(function(e){
    e.preventDefault();
    revolver[this.className]();
});

$controls.find('.goto').click(function(e){
    e.preventDefault();
    revolver.goTo($(this).data('goto'));
});

var revolver = $('my_slider').revolver({
        autoPlay: false,
        onReady: function(){
            alert('"onReady" fired.');
        },
        onPlay: function(){
            alert('"onPlay" fired.');
        },
        onStop: function(){
            alert('"onStop" fired.');
        },
        onPause: function(){
            alert('"onPause" fired.');
        },
        onRestart: function(){
            alert('"onRestart" fired.');
        },
        transition: {
            onStart: function(){
                alert('"transition.onStart" fired.');
            },
            onFinish: function(){
                alert('"transition.onFinish" fired.');
            },
            type: 'fade'
        }
    })
    .retrieve('revolver');

var $controls = $('.controls');

$controls.find('.first, .previous, .next, .last, .play, .stop, .pause, .restart').click(function(e){
    e.preventDefault();
    revolver[this.className]();
});

$controls.find('.goto').click(function(e){
    e.preventDefault();
    revolver.goTo($(this).get('data-goto'));
});