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

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

ОБСУЖДЕНИЕ

JQuery слайдер - Jlider

Слайдер Jlider
Просмотров: 3478  Скачан: 271 раз  Комментариев в теме: 0

Jlider - это добротный слайдер на JQuery с весьма богатым набором конфигураций, от (Juskteez).

Представленный слайдер в полной мере справляется со своей задачей - он удобный, имеет красивый дизайн и в то же время он компактен, это позволяет поместить множество информации экономя место на сайте, при этом привлекая взор пользователя красивыми эффектами.

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

- В слайдере реализован слайд-шоу (есть возможность раскрывать изображение на весь экран)

- Навигация по слайдам

- Есть прогресс бар

- Возможность проигрывать видео (HTML5 Video)

- Стоп Пауза слайда при наведении

- Контроль панель

- Компактный дизайн подписей к слайдам.

Для более детальной информации смотрите ДЕМО или перейдите на сайт автора.

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

 

HTML

<ul class="jlider" id="test">
    <li><img src="image/1.jpg" data-href="#" alt="Текст к изображению" title="Image Title 1" poster="image/1_thumb.jpg"/></li>
    <li><img src="image/2.jpg" data-href="#" alt="Текст к изображению" title="Image Title 2" poster="image/2_thumb.jpg"/></li>
    <li><video poster="video/bbb.jpg"><source src="video/bbb.ogv" type="video/ogg"/><source src="video/bbb.mp4" type="video/mp4" />Your browser does not support HTML5 video.</video></li>
    <li><img src="image/3.jpg" data-href="#" alt="Текст к изображению" title="Image Title 3" poster="image/3_thumb.jpg"/></li>
    <li><img src="image/4.jpg" data-href="#" alt="Текст к изображению" title="Image Title 4" poster="image/4_thumb.jpg"/></li>
    <li><img src="image/5.jpg" data-href="#" alt="Текст к изображению" title="Image Title 5" poster="image/5_thumb.jpg"/></li>
    <li><img src="image/6.jpg" data-href="#" alt="Текст к изображению" title="Image Title 6" poster="image/6_thumb.jpg"/></li>
    <li><img src="image/7.jpg" data-href="#" alt="Текст к изображению" title="Image Title 7" poster="image/7_thumb.jpg"/></li>
</ul>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jQueryv1.7.2.js"></script>
<script type="text/javascript" src="js/jlider/jlider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#test").jliderSlide({
            slideEffect  : "random",
            viewEffect  : "scaleIn",
            visiTime     : 6000,
            autoPlay     : true,
            width        : "800px",
            height       : "420px",
            photoCaption : true,
            visiProgress : true,
            noCopy       : true,
            dirType       : "preview",
            hideControl  : "visible",
            responsive   : false,
            navType      : "number",
            hoverPause: true
        });
    });
</script>

Настройки:

slideEffect - эффект перехода слайда
Может быть : [fade | slide | scaleIn | scaleOut | random]

viewEffect - эффект слайда
Может быть: [no | scaleIn | scaleOut]

visiTime - Время между слайдами(ms) (стандартно стоит 4000)

visiProgress - Прогресс бар.
Может быть:  false, true

autoPlay - Включить Слайд шоу
Может быть:  false, true

width - Ширина Слайда (пикселей или процент)

height - Высота Слайда (пиксель или процент)

ratio - Расширение слайда.
Может быть: [no | 4:3 | 16:9 | X:Y]

responsive - Отклик слайда
Может быть:  false, true

photoCaption - Текст к слайду
Может быть:  false, true

noCopy - Запрещает копирование изображения
Может быть:  false, true

hideControl - Кнопки управления
Может быть [visible | hover | hide]

dirType - Дизайн навигации переключения слайда (вправо, влево)
Может быть: [arrow | preview]

fullScreen - Разрешить полноэкранный режим
Может быть: [fade]

navType - Навигация по слайдам.
Может быть: [line | dot | number]

hoverPause - Пауза слайда при наведении
Может быть:  false, true

Loaded 	function  (curSlide) {} - Пользовательские функции после Loaded
pressPlay 	function (curSlide) {} - Пользовательские функции pressPlay
pressPause 	function (curSlide) {} - Пользовательские функции после pressPause
pressNext 	function (curSlide) {} - Пользовательские функции после pressNext
pressPrev 	function (curSlide) {} - Пользовательские функции после pressPrev
beforeSlide function (curSlide) {} - Пользовательские функции beforeSlide
afterSlide 	function (curSlide) {} - Пользовательские функции afterSlide
goFullscreen	function (curSlide) {} - Пользовательские функции goFullscreen
outFullscreen	function (curSlide) {} - Пользовательские функции outFullscreen
Материалы по теме:

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

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

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

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

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

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

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

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

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

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

Design StudioDesign Studio

Современный html шаблон с готовым набором страниц, на главной странице расположен стильный слайдер с комментариями к изображению......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

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

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...
  • Текущий 3.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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