RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Стильный слайдер на jQuery, Mobilyslider

Стильный слайдер на jQuery «Mobilyslider»
Просмотров: 2886  Скачан: 386 раз  Комментариев в теме: 0

Стильный слайдер на jquery, а если быть точнее, то это плагин MobilySlider имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, имеет у себя на ряд полезных опций, в числе которых навигационные стрелки (вправо, влево), эффекты перехода (horizontal, vertical, fade), слайд шоу и др.

Особенности слайдера:

- Можно использовать HTML контент.

- Бесконечная прокрутка слайдов.

- Автоматическая генерация указателей страниц.

- Автоматическая генерация элементов управления.

- Слайд-шоу.

- Эффекты перехода: вертикальное, горизонтальное и затухание.

- Остановка слайд-шоу, при наведении курсор мыши на слайд.

- Функции обратного вызова.

Шаг 1 - создание разметки

 

HTML

<div class="slider" id="slider3">
    <div class="sliderContent">
        <div class="item">
            <img src="images/1.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/2.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/3.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/4.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/5.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/6.jpg" alt="" />
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/mobilyslider.js"></script>
<script type="text/javascript">
$(function(){
    $('#slider3').mobilyslider({
       transition: 'fade',
       animationSpeed: 800,
       autoplay: true,
       bullets: true,
       arrowsHide: false,
       pauseOnHover: true
    });
});
</script>

Опции:

ОПЦИИ ПО УМОЛЧАНИЮ
content: '.sliderContent' - класс для контейнера слайдера
content: '.sliderContent' - селектор слайдов
transition: 'horizontal' - эффект перехода между слайдами, можно использовать(horizontal, vertical, fade)
animationSpeed: 300 - скорость перехода между слайдами в мс
autoplay: false - включение слайд-шоу
autoplaySpeed: 3000 - время показа слайда в ms
pauseOnHover: false - остановка слайд-шоу при наведении курсора мыши
bullets: true - включение отключение кнопок слайдов (true/false, класс: sliderBullets)
arrows: true - включение отключение стрелок вперед/назад (true/false, класс: sliderArrows)
arrowsHide: true - выводит стрелки только при наведении курсора мыши
prev: 'prev' - имя класса для кнопки назад
next: 'next' - имя класса для кнопки вперед
animationStart: function(){} - возвратная функция запуска перехода между слайдами
animationComplete: function(){} - возвратная функция завершения перехода между слайдами
Материалы по теме:

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....
Интересные публикации:

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить