Revolver - новый слайдер контента
Новый слайдер контента или даже его можно назвать фреймворком, позволяющим создавать свои уникальные слайдеры. Поддерживается как jQuery, так и Mootools.
HTML
Пример на базе первой демо страницы с навигацией.
<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>
<div class="controls">
<a class="first" href="#">Первый</a>
<a class="previous" href="#">Предыдущий</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="#">Следующий</a>
<a class="last" href="#">Последний</a>
<a class="stop" href="#">Стоп</a>
<a class="play" href="#">Плей</a>
<a class="pause" href="#">Пауза</a>
<a class="restart" href="#">Рестарт</a>
</div>Первая часть, это изображения, а вторая часть - навигация.
CSS
За сам слайдер отвечают такие стили:
.revolver.container {
box-shadow: 0 0 8px rgba(0,0,0,0.9);
width: 720px;
height: 300px;
margin-top: 20px;
overflow: hidden;
position: relative;
}
.revolver.stack .slide {
left: 0;
position: absolute;
top: 0;
}
.revolver.inline .slide {
margin: 0;
padding: 0;
position: static;
}
.revolver.reveal .slide {
height: 300px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 720px;
}А за навигацию такие:
.controls {
line-height: 30px;
}
.controls a {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
padding: 2px 7px;
text-decoration: none;
text-shadow: 1px 1px 0 black;
}
.controls a:hover {
background-color: #a3a3a3;
color: black;
text-shadow: none;
}jаvascript
Подключаем в шапке скрипты, в данном случае jQuery и min версию revolver:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="src/jquery.revolver.min.js"></script>И в футере подключаем инициализируюший скрипт:
var $revolver = $('#my_slider').revolver(),
revolver = $revolver.data('revolver'),
$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'));
});Более подробно можно посмотреть использование плагина на Демо страницах, а опции jаvascript на офф. странице проекта.
Офф. страница:http://revolverjs.com/
Ссылки
