Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Mobily Slider - слайдер на jQuery

Mobily Slider - слайдер на jQuery


MobilySlider - это плагина на jQuery с размером в 5 килобайт, от английского друга playground mobily. Слайдер стильный и достаточно функциональный, а так же очень простой в настройках.

Особенности:
Можно добавить содержания HTML (awesome!)
Цикл ( слайдер сам повторяет прокрутку)
генерируется автоматически нумерации страниц
генерируется автоматически стрелки
AutoPlay
горизонтальные, вертикальные эффекты перехода слайдов
пауза при наведении
функции обратного вызова

Демо: смотреть
Скачать: mobilyslider.zip [489 Kb] (cкачиваний: 1594)


Сначала как всегда подключим css и js файлы, между head:
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyslider.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>


Далее разметка страницы, а она у нас очень проста.
    <div id="content">
        
        <div class="slider">
            <div class="sliderContent">
                <div class="item">
                    <img src="img/img1.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="img/img2.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="img/img3.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="img/img4.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="img/img5.jpg" alt="" />
                </div>
                <div class="item">
                    <img src="img/img6.jpg" alt="" />
                </div>
            </div>
        </div>
        
    </div>


Ну и конечно же эффективности нам предадут css стили:
/* ------ general
-----------------------------------------------*/

body {
font-family:Arial, Helvetica, sans-serif;
background:#f1f1f1;
font-size:11px;
}

/* ------ mobilyslider
-----------------------------------------------*/

#content {
width:800px;
margin:100px auto 0;
}

.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;
}

a {
color:#fff;
}

a img {
border:none;
}



В файле init.js находятся настройки слайдера:
$(function(){
    
    $('.slider').mobilyslider({
        content: '.sliderContent',
        children: 'div',
        transition: 'horizontal',
        animationSpeed: 500,
        autoplay: false,
        autoplaySpeed: 3000,
        pauseOnHover: false,
        bullets: true,
        arrows: true,
        arrowsHide: true,
        prev: 'prev',
        next: 'next',
        animationStart: function(){},
        animationComplete: function(){}
    });
    
});


Демо: смотреть
Скачать: mobilyslider.zip [489 Kb] (cкачиваний: 1594)
Опубликовал dimas_ua, 18-05-2011, 00:00 Комментариев: 0
 (голосов: 13)