qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Стильный слайдер на jQuery «Mobilyslider»
Просмотров: 3246  Скачан: 420 раз  Комментариев в теме: 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(){} - возвратная функция завершения перехода между слайдами
Материалы по теме:

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

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

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Kenburner слайдерKenburner слайдер

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

Rotator на css и jQueryRotator на css и jQuery

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Слайдер картинок на JqueryСлайдер картинок на Jquery

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....
Интересные публикации:

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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