Revolver.js

• Html
• Css
• jQuery
• Mootools

<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;
}

$('#my_slider').revolver({transition: {type: 'fade'}});

// Or, since "fade" is the default option...
$('#my_slider').revolver();

$('my_slider').revolver({transition: {type: 'fade'}});

// Or, since "fade" is the default option...
$('my_slider').revolver();