| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Mobilyslider - простой jQuery слайдер
|
|
Mobilyslider - простой jQuery слайдер
Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и другого.
Рассмотрим сразу все три примера из Демо. Как видите все они отличаются лишь дополнительными классами 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>
Все три примера слайдеров из демо имеют одинаковый вид, поэтому и стили они имеют одни и те же. Поэтому, чтобы добавить к себе один, любой, из этих слайдеров - используйте один и тот-же стиль. В случае замены слайдера на другой, необходимо только изменить html разметку.
Основной код CSS
JAVASCRIPT
Пример 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
});
Предпросмотр
Скачать
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
