2 618 Скрипты / Slider

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/

Скачать 691Загрузок 436,71 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи