MOBILYSLIDER - ПРОСТОЙ JQUERY СЛАЙДЕР
Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.
Разметка HTML
Рассмотрим сразу все три примера из Демо. Как видите все они отличаются лишь дополнительными классами slider1, slider2, slider3.
В то место где вы хотите поставить слайдер берем один из трех кодов.
Пример 1
Код: Выделить всё
<div class="slider slider1">
<div class="sliderContent">
<div class="item">
<img src="адрес вашей картинки" alt="" />
</div>
<div class="item">
<img src="адрес вашей картинки" alt="" />
</div>
</div>
</div>
Пример 2
Код: Выделить всё
<div class="slider slider2">
<div class="sliderContent">
<div class="item">
<img src="адрес вашей картинки" alt="" />
</div>
<div class="item">
<img src="адрес вашей картинки" alt="" />
</div>
</div>
</div>
Пример 3
Код: Выделить всё
<div class="slider slider3">
<div class="sliderContent">
<div class="item">
<img src="адрес вашей картинки" alt="" />
</div>
<div class="item">
<img src="адрес вашей картинки" alt="" />
</div>
</div>
</div>
CSS
Все три примера слайдеров из
http://pcvector.net/uploads/demo/script ... wsp5uN_sjQ имеют одинаковый вид, поэтому и стили они имеют одни и те же:
Код: Выделить всё
.slider {
float:left;
width:800px;
height:350px;
position:relative;
padding-bottom:26px;
background:url(ваш адрес/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(ваш адрес/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(ваш адрес/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
javascript
Три варианта инициализации данного плагина. В первом примере вызов с дефолтными значениями. В двух остальных с опциями.
Пример 1
Пример 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(){} // вызывать функцию когда переход завершен
});
Скачиваем архив ниже. Загружаем скрипты, картинки через менеджер картинок в админке. Все ссылки меняем на ваши.
Подключаем скрипт.
Открываем шаблон
Перед закрывающим тегом
ставим -
Код: Выделить всё
<script type="text/javascript" src="адрес вашего сайта/init.js"></script>
<script type="text/javascript" src="адрес вашего сайта/mobilyslider.js"></script>
ДЕМО
http://pcvector.net/uploads/demo/script ... wstiuN_sjQ