RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

JQuery слайдер - Jlider

Слайдер Jlider
Просмотров: 4294  Скачан: 320 раз  Комментариев в теме: 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 плагинаПолноэкранное слайд-шоу с помощью J...

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

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

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

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

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

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

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

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

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

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

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

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....
Интересные публикации:

GridoGrido

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

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

Горизонтальное меню в темном стиле с выпадающими пунктами....

TanyaCMS 1.0TanyaCMS 1.0

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

Navigation SlaiderNavigation Slaider

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

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Boxes M...

Меню в виде куба с красивым эффектом трансформации....
  • Текущий 2.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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