Mobilyslider - простой jQuery слайдер

Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.

HTML

Рассмотрим сразу все три примера из Демо. Как видите все они отличаются лишь дополнительными классами slider1, slider2, slider3

Пример 1

    <div class="slider slider1">
        <div class="sliderContent">
            <div class="item">
                <img src="img/img1.jpg" alt="" />
            </div>
            <div class="item">
                <img src="img/img2.jpg" alt="" />
            </div>
        </div>
    </div>

Пример 2

   <div class="slider slider2">
        <div class="sliderContent">
            <div class="item">
                <img src="img/img1.jpg" alt="" />
            </div>
            <div class="item">
                <img src="img/img2.jpg" alt="" />
            </div>
        </div>
    </div>

Пример 3

    <div class="slider slider3">
        <div class="sliderContent">
            <div class="item">
                <img src="img/img1.jpg" alt="" />
            </div>
            <div class="item">
                <img src="img/img2.jpg" alt="" />
            </div>
        </div>
    </div>

CSS

Все три примера слайдеров из демо имеют одинаковый вид, поэтому и стили они имеют одни и те же:

.slider {
float:left;
width:800px;
height:350px;
position:relative;
padding-bottom:26px;
background:url(../gfx/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
width:800px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(../gfx/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item {
position:absolute;
width:800px;
height:350px;
background:#fff;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(../gfx/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}

JS

Три варианта инициализации данного плагина. В первом примере вызов с дефолтными значениями. В двух остальных с опциями.

Пример 1

$('.slider1').mobilyslider();

Пример 2

    $('.slider2').mobilyslider({
        transition: 'vertical',
        animationSpeed: 500,
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover: true,
        bullets: false
    });

Пример 3

    $('.slider3').mobilyslider({
        transition: 'fade',
        animationSpeed: 800,
        bullets: true,
        arrowsHide: false
    });

Опции

Вот все доступные опции слайдера:

$('.slider').mobilyslider({
    content: '.sliderContent', // селектор для слайдера
    children: 'div', // селектор для дочерних элементов
    transition: 'horizontal', // переходы: horizontal, vertical, fade
    animationSpeed: 300, // скорость перехода в миллисекундах
    autoplay: false,
    autoplaySpeed: 3000, // время между переходами (миллисекунды)
    pauseOnHover: false, // останавливать навигацию при наведении на слайдер: false, true
    bullets: true, // генерировать навигацию (true/false, class: sliderBullets)
    arrows: true, // генерировать стрелки вперед и назад (true/false, class: sliderArrows)
    arrowsHide: true, // показывать стрелки только при наведении
    prev: 'prev', // название класса для кнопки назад
    next: 'next', // название класса для кнопки вперед
    animationStart: function(){}, // вызывать функцию при старте перехода
    animationComplete: function(){} // вызывать функцию когда переход завершен
});