Revolver.js

Без эффектов

Нет никаких эффектов, слайды просто показываются и исчезают.

Исходники

Html
Css
jQuery
Mootools

	            
<div id="my_slider" class="revolver container stack">
    <img class="slide" src="../img/1.jpg" alt="" />
    <img class="slide hidden" src="../img/2.jpg" alt="" />
    <img class="slide hidden" src="../img/3.jpg" alt="" />
    <img class="slide hidden" src="../img/4.jpg" alt="" />
    <img class="slide hidden" src="../img/5.jpg" alt="" />
    <img class="slide hidden" src="../img/6.jpg" 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'}});

С эффектом Fade

Смена слайдов с эффектами fade in и fade out

Html
Css
jQuery
Mootools

	            
<div id="my_slider" class="revolver container stack">
    <img class="slide" src="../img/1.jpg" alt="" />
    <img class="slide hidden" src="../img/2.jpg" alt="" />
    <img class="slide hidden" src="../img/3.jpg" alt="" />
    <img class="slide hidden" src="../img/4.jpg" alt="" />
    <img class="slide hidden" src="../img/5.jpg" alt="" />
    <img class="slide hidden" src="../img/6.jpg" 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'}});

// или тоже самое "fade" как опция по умолчанию...
$('#my_slider').revolver();

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

// или тоже самое "fade" как опция по умолчанию...
$('my_slider').revolver();

С эффектом Slide

Смена слайдов с эффектами slide in и slide out

Html
Css
jQuery
Mootools

	            
<div id="my_slider" class="revolver container stack">
    <img class="slide" src="../img/1.jpg" alt="" />
    <img class="slide hidden" src="../img/2.jpg" alt="" />
    <img class="slide hidden" src="../img/3.jpg" alt="" />
    <img class="slide hidden" src="../img/4.jpg" alt="" />
    <img class="slide hidden" src="../img/5.jpg" alt="" />
    <img class="slide hidden" src="../img/6.jpg" 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'}});

С эффектом Reveral

Html
Css
jQuery
Mootools

	            
<div id="my_slider" class="revolver container stack">
    <img class="slide" src="../img/1.jpg" alt="" />
    <img class="slide hidden" src="../img/2.jpg" alt="" />
    <img class="slide hidden" src="../img/3.jpg" alt="" />
    <img class="slide hidden" src="../img/4.jpg" alt="" />
    <img class="slide hidden" src="../img/5.jpg" alt="" />
    <img class="slide hidden" src="../img/6.jpg" 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: 'reveal'}});

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

Пример навигации по слайдеру с помощью клавиатуры

Используйте стрелки на клавиатуре, чтобы листать слайды: вверх, вниз, влево, вправо

Html
Css
jQuery
Mootools

	            
<div id="my_slider" class="revolver container stack">
    <img class="slide" src="../img/1.jpg" alt="" />
    <img class="slide hidden" src="../img/2.jpg" alt="" />
    <img class="slide hidden" src="../img/3.jpg" alt="" />
    <img class="slide hidden" src="../img/4.jpg" alt="" />
    <img class="slide hidden" src="../img/5.jpg" alt="" />
    <img class="slide hidden" src="../img/6.jpg" 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({transition: {type: 'slide'}}).data('revolver');

$(document).keydown(function(e)
{
    // right
    if (e.keyCode === 39)
    {
        revolver.next();
    }

    // left
    else if (e.keyCode === 37)
    {
        revolver.previous({direction:'right'});
    }

    // up
    else if (e.keyCode === 38)
    {
        e.preventDefault();
        revolver.next({direction:'up'});
    }

    // down
    else if (e.keyCode === 40)
    {
        e.preventDefault();
        revolver.previous({direction:'down'});
    }
});

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

$(document).keydown(function(e)
{
    // right
    if (e.key === "right")
    {
        revolver.next();
    }

    // left
    else if (e.key === "left")
    {
        revolver.previous({direction:'right'});
    }

    // up
    else if (e.key === "up")
    {
        e.preventDefault();
        revolver.next({direction:'up'});
    }

    // down
    else if (e.key === "down")
    {
        e.preventDefault();
        revolver.previous({direction:'down'});
    }
});