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

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

ОБСУЖДЕНИЕ

JQuery слайдер - Jlider

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

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

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

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

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

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

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

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

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

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

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

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Шаблон Desire Night ClubШаблон Desire Night Club

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

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

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

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

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

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

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

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

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


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