iView — адаптивный jQuery слайдер
Плагин для создания красивейших слайдеров — iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.
HTML разметка
В head подключаем необходимые файлы для работы плагина:
|
1 2 3 4 5 |
<link rel="stylesheet" href="iview.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="raphael-min.js" type="text/javascript"></script> <script src="jquery.easing.js" type="text/javascript"></script> <script src="iview.packed.js" type="text/javascript"></script> |
В тело документа вставьте секцию слайдера (или слайдеров):
|
1 2 3 4 5 6 |
<div id="iview"> <!-- Slide 1 --> <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div> <!-- Slide 2 --> <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div> </div> |
Вы можете добавить Заголовок для каждого слайда. Для этого добавьте div с классом “iview-caption” в div приведенный выше:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="iview"> <!-- Slide 1 --> <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"> <!-- Caption --> <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div> </div> <!-- Slide 2 --> <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"> <!-- Caption --> <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div> </div> </div> |
При добавлении html5 атрибута data-attribute к div с классом “iview-caption“, вы можете указать эффект, который будет использоваться для Заголовка. Возможные эффекты: “wipeLeft“, “wipeRight“, “wipeTop“, “wipeBottom“, “expandLeft“, “expandRight“, “expandTop“, “expandBottom“, “fade“.
|
1 |
<div class="iview-caption" data-transition="fade">Описание заголовка</div> |
Заголовок может иметь data-transition с параметром “fade“, в этом случае он будет показываться с эффектом fade.
Доступны ещё такие HTML5 атрибуты:
- data-transition — возможные эффекты перехода: “wipeLeft“, “wipeRight“, “wipeTop“, “wipeBottom“, “expandLeft“, “expandRight“, “expandTop“, “expandBottom“, “fade“
- data-easing — полный список доступен тут
- data-speed — скорость переходов мс.
- data-x — позиция Заголовка по координате X в px.
- data-y — позиция Заголовка по координате Y в px.
- data-width — ширина Заголовка в px, если не указана будет использоваться исходная ширина Заголовка.
- data-height — высота Заголовка в px, если не указана будет использоваться исходная высота Заголовка.
Видео
Чтобы использовать в вашем слайдшоу видео, нужно вставить iframe в один из ваших слайдов:
|
1 2 3 4 5 6 7 |
<div data-iview:image="photos/photo.jpg"> <!-- Video iFrame --> <iframe src="https://player.vimeo.com/video/11475955?byline=1&portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <!-- Caption --> <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div> </div> |
Как вы можете заметить, мы задали ширину iframe 100%, таким образом видео будет изменять свой размер в соответствии с размерами слайдшоу.
И окончательно вам нужно теперь инициализировать плагин, то есть указать к какому селектору его применять:
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function() { $('#slider').iView(); }); </script> |
Доступные опции.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script type="text/javascript"> $(document).ready(function() { $('#slider').iView({ fx: 'random', // установите эффект, например: 'left-curtain,fade,zigzag-top,strip-left-fade' (достпуные эффекты читайте ниже) easing: 'easeOutQuad', // полный список эффектов тут: http://jqueryui.com/demos/effect/easing.html strips: 20, // количество полос для их же анимации blockCols: 10, // количество колонок для блочной анимации blockRows: 5, // количество строк для блочной анимации captionSpeed: 500, // скорость эффекта перехода для Заголовка captionEasing: 'easeInOutSine', // easing эффект для заголовка captionOpacity: 1, // прозрачность заголовка animationSpeed: 500, // скорость анимациии слайдов pauseTime: 5000, // как доолго будет показываться каждый слайд startSlide: 0, // установвка начального слайда (0 index) directionNav: true, // навигация Вперед/Назад directionNavHoverOpacity: 0.6, // Fade при наведении курсора controlNav: true, // 1,2,3,4… цифровая навигация controlNavNextPrev: true, // навигация Вперед/Назад controlNavHoverOpacity: 0.6, // fade эффект при наведении на наввигацию controlNavThumbs: false, // Показывать миниатюры на навигации controlNavTooltip: true, // Показывать превьюшки изображений ввиде тултипов autoAdvance: true, // Force auto transitions keyboardNav: true, // использование стрелок влево / вправо touchNav: true, // использование Touch swipe для смены слайдов pauseOnHover: false, // остановка слайдшоу при наведении nextLabel: "Next", // текст для кнопки "Вперед" previousLabel: "Previous", // текст для кнопки "Назад" playLabel: "Play", // текст для кнопки "Плей" pauseLabel: "Pause", // текст для кнопки "Пауза" closeLabel: "Close", // текст для кнопки "Закрыть" randomStart: false, //начинать со случайного слайдера timer: 'Pie', // Стиль таймера: "Pie", "360Bar" или "Bar" timerBg: '#000', // Фон таймера timerColor: '#EEE', // цвет таймера timerOpacity: 0.5, // прозрачность таймера timerDiameter: 30, // диаметр таймера timerPadding: 4, // отступ для таймера timerStroke: 3, // ширина границы таймера timerBarStroke: 1, // ширина границы Bar тамера timerBarStrokeColor: '#EEE', // Цвет границы таймера Bar timerBarStrokeStyle: 'solid', // Стиль границы таймера Bar timerX: 10, // Timer X position threshold timerY: 10, // Timer Y position threshold tooltipX: 5, // Tooltip X position threshold tooltipY: -5, // Tooltip Y position threshold onBeforeChange: function(){}, // триггеры до перехода слайдера onAfterChange: function(){}, // триггеры после перехода слайдера onSlideshowEnd: function(){}, // триггеры после показа всех слайдов onLastSlide: function(){}, // триггеры, когда показан последний слайдер onAfterLoad: function(){}, // триггер, когда слайдер загружен onPause: function(){}, // триггер, когда слайдер на паузе onPlay: function(){} // триггер, когда слайдер проигрывается }); }); |
Доступные значения эффектов для опции fx:
- random
- strip-down-right
- strip-down-left
- strip-up-right
- strip-up-left
- strip-up-down
- strip-up-down-left
- strip-left-right
- strip-left-right-down
- slide-in-right
- slide-in-left
- slide-in-up
- slide-in-down
- left-curtain
- right-curtain
- top-curtain
- bottom-curtain
- fade
- block-random
- block-fade
- block-fade-reverse
- block-expand
- block-expand-reverse
- block-expand-random
- block-drop-random
- zigzag-top
- zigzag-bottom
- zigzag-grow-top
- zigzag-grow-bottom
- zigzag-drop-top
- zigzag-drop-bottom
- strip-left-fade
- strip-right-fade
- strip-top-fade
- strip-bottom-fade
HTML5 атрибуты data-
URL ссылка изображения в слайдере добавляется с помощью html5 атрибута data-. Это позволяет загрузить изображение только тогда, когда слайдшоу обращается к нему (lazy load метод).
С помощью html5 атрибутов вы можете добавить множество свойств для слайда, чтобы перезаписать общие.
Например, URL для миниатюр:
|
1 |
<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div> |
или эффект перехода, только для одного слайда:
|
1 |
<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div> |
Вы можете установить случайные переходы из множества эффектов:
|
1 |
<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div> |
Ниже приведены все доступные атрибуты data-:
- data-iview:transition — тип перехода: “strip-down-right”, “strip-down-left”, “strip-up-right”, “strip-up-left”, “strip-up-down”, “strip-up-down-left”, “strip-left-right”, “strip-left-right-down”, “slide-in-right”, “slide-in-left”, “slide-in-up”, “slide-in-down”, “left-curtain”, “right-curtain”, “top-curtain”, “bottom-curtain”, “fade”, “block-random”, “block-fade”, “block-fade-reverse”, “block-expand”, “block-expand-reverse”, “block-expand-random”, “block-drop-random”, “zigzag-top”, “zigzag-bottom”, “zigzag-grow-top”, “zigzag-grow-bottom”, “zigzag-drop-top”, “zigzag-drop-bottom”, “strip-left-fade”, “strip-right-fade”, “strip-top-fade”, “strip-bottom-fade”
- data-iview:easing — полный список easing эффектов тут
- data-iview:image — URL изображение слайда
- data-iview:thumbnail — URL миниатюры слайда (если значение опции ‘controlNavThumbs‘ установлено, как true)
- data-iview:pausetime — Задержка в мс между концом исползуемого эффекта и началом следующего
- data-iview:type — тип слайда (установите для video, чтобы оптимизировать слайдер для показа видео роликов)
CSS
В этом примере мы используем два CSS файла. Один содержит некоторые общие стили, такие как цвета ссылок, размеры шрифтов и т.д. для страницы.
Другой файл содержит все специфические стили скрипта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* The strips and blocks in the Slider */ .iview-strip { some styles } .iview-block { some styles } /* Direction nav styles (e.g. Next & Prev) */ .iview-directionNav a { some styles } .iview-prevNav { some styles } .iview-nextNav { some styles } /* Control nav styles (e.g. 1,2,3…) */ .iview-controlNav { some styles } .iview-controlNav a { some styles } .iview-controlNav a img { some styles } .iview-controlNav a.active { some styles } /* The captions in the Slider */ .iview-caption { some styles } /* The timer in the Slider */ #iview-timer { some styles } #iview-timer div { some styles } /* The Preloader in the Slider */ #iview-preloader { some styles } #iview-preloader div { some styles } /* The video show in the Slider */ .iview-video-show { some styles } .iview-video-show .iview-video-container { some styles } .iview-video-show .iview-video-container a.iview-video-close { some styles } .iview-video-show .iview-video-container a.iview-video-close:hover { some styles } /* The tooltip in the Slider */ #iview-tooltip { some styles } #iview-tooltip div.holder { some styles } #iview-tooltip div.holder div.container { some styles } #iview-tooltip div.holder div.container div { some styles } #iview-tooltip div.holder div.container div img { some styles } |
javascript
Как сделать Паузу и Плей слайдера?
|
1 2 |
$('#slider').trigger('iView:pause'); //Остановка слайдера $('#slider').trigger('iView:play'); //Старт слайдера |
Как сменить слайд?
|
1 |
$('#slider').trigger('iView:goSlide', [2]); //перейти к слайду 2 |
Как перейти к следующему или предыдущему слайду?
|
1 2 |
$('#slider').trigger('iView:previous'); //перейти к предыдущему слайду $('#slider').trigger('iView:next'); //перейти к следующему слайду |
Как установить показ со случайного слайда?
|
1 2 3 4 5 |
var total = $('#slider').children().length; var rand = Math.floor(Math.random()*total); $('#slider').iView({ startSlide:rand }); |
СКАЧАТЬ
iprodev-iView
ДЕМОПосмотреть
пример
Связанные посты:
Метки: Слайдеры