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

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

ОБСУЖДЕНИЕ

JQuery слайдер - Jlider

Слайдер Jlider
Просмотров: 5040  Скачан: 352 раз  Комментариев в теме: 1

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
Материалы по теме:

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

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

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

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

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

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

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

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

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Rotator на css и jQueryRotator на css и jQuery

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

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

JourneyJourney

Шаблон Journey построенный на HTML5, в шаблоне имеется слайдер, стрелка вверх, табы, галерея, контактная форма с Google Maps....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......
  • Текущий 2.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (1)
↑ 0 ↓
reklama-prosto
Во! Прикольный слайдер. Автор спасибо. Отлично подходит для портфолио
Ответить Ответ с цитатой

Страницы: 1

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


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