Revolver.js

No Transition

Not really a transition at all, pretty much just show and hide.

Source

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: 'none'}});

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

The Fade Transition

One fades in, one fades out... Pretty basic stuff here guys.

Source

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();

The Slide Transition

It's pretty much safe to say that every slider ever made has a "slide-in, slide-out" transition… Revolver does too.

<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: 'slide'}});

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

The Reveal Transition

Reveal might look like the Slide transition at first... but look closer. This transition will "remove the curtain" from the next slide. Check it out!

Source

Html
Css
jQuery
Mootools

<div id="my_slider">

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

</div>

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

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

#my_slider .hidden {
    display: none;
}

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

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