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

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

ОБСУЖДЕНИЕ

JQuery слайдер - Jlider

Слайдер Jlider
Просмотров: 2724  Скачан: 210 раз  Комментариев в теме: 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
Материалы по теме:

Rotator на css и jQueryRotator на css и jQuery

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

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

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

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

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

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

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

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

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

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......

Оригинальное горизонтальное менюОригинальное горизонтальное меню

Красивое горизонтальное меню в оригинальном стиле, в меню используется большое количество позиций......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

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

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

Admin PanelAdmin Panel

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

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......
  • Текущий 3.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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