Jquery вертикальний слайдер зі стрілками та навігацією. Добірка адаптивних слайдерів

> >

Стилі слайдера

.slider-box( width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relative ; width : 10000px ; height : 210px ; )

Контейнер.slider-box визначає розміри слайдера. За допомогою властивості overflow:hidden ховаються всі елементи, які не входять в область всередині елемента.

Для контейнера.slider задається велика ширина. Це необхідно для того, щоб у нього встрочку помістилися всі слайди.

Слайди вирівнюються за допомогою float:left.

Нижче показано схематичне розташування блоків слайдера.

Скрипт

Рух слайдів буде здійснюватися за допомогою плавної зміни якості margin-left контейнера.slider.

$(function() ( var width= $(".slider-box" ) .width() ; // Ширина слайдера. interval = 4000; // Інтервал зміни слайдів.$(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копія останнього слайду міститься на початок.$() .eq (1 ) .clone () .appendTo (".slider" ) ; // Копія першого слайду міститься наприкінці. // Контейнер.slider зсувається ліворуч на ширину одного слайду. setInterval("animation()" , interval) ; // Запускається функція animation(), що виконує зміну слайдів.) ) ; function animation() (var margin = parseInt($(".slider").css("marginLeft"))); // Поточне зміщення блоку. width= $(".slider-box" ) .width () , // Ширина слайдера. slidersAmount= $(".slider" ) .children() .length ; // Кількість слайдів у слайдері. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Якщо поточний слайд не останній,(margin = margin-width; // значення margin зменшується на ширину слайда.) else ( // Якщо показано останній слайд,$(".slider") .css ("margin-left", - width); // то блок.slider повертається у початкове положення, margin = - width * 2; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Блок. slider зміщується вліво на 1 слайд. } ;

У результаті вийшов простий слайдер із нескінченним автоматичним прокручуванням.

У цій статті розберемо дуже легко за допомогою CSS Flexbox і CSS трансформацій створити адаптивний слайдер для сайту.

Вихідні коди та демо слайдера

Проект слайдера під назвою chiefSlider розташований на GitHub. Перейти на нього можна за цим посиланням.

Слайдер з одним активним слайдом (без зациклювання):

Слайдер із трьома активними слайдами (без зациклювання):

Приклад, в якому показано, як можна застосувати слайдер для ротації статей:

Переваги слайдера chiefSlider

Перелічимо основні переваги даного слайдера:

• по-перше, він не створює клони елементів (item)для організації зациклювання, як це реалізовано, наприклад, у плагінах OwlCarouselі slick;
• по-друге, він не залежить від бібліотеки jQuery; це не тільки прибирає додаткові вимоги, а й робить його легшим;
• по-третє, він практично не вносить жодних змін до DOM документа; єдине, що він робить – це додає чи змінює значення CSS трансформацій у елементів слайдера;
• по-четверте, він містить лише мінімальний набір функцій; додатковий функціонал можна додати залежно від завдання;
• по-п'яте, він є адаптивним, тобто. його можна використовувати на будь-яких сайтах; адаптивність слайдера налаштовується за допомогою CSS;
• по-шосте, кількість активних елементів налаштовується за допомогою CSS; це означає, що його можна використовувати для створення каруселі як з одним активним слайдом, так і з будь-якою іншою кількістю.

Установка слайдера chiefSlider

Установка слайдера виконується за 3 кроки:

• додати CSS слайдера chiefSlider на сторінку або CSS-файл, підключений до сторінки;
• помістити HTML код слайдера у потрібне місце сторінки;
• вставити JavaScript код на сторінку або js-файл, підключений до сторінки.

CSS та JavaScript код бажано мінімізувати, ця дія забезпечить швидше завантаження сторінки.

Як розробити простий слайдер для сайту (без зациклювання)

Створення слайдера chiefSliderскладатиметься зі створення HTML коду, CSS та JavaScript (без jQuery).

HTML код слайдера chiefSlider:

Як видно, слайдер має дуже просту HTML-архітектуру. Починається вона з основного блоку, який має клас slider. Цей блок складається з 3 елементів.

Перший елемент - це .slider__wrapper. Він виступає як обгортка для елементів.slider__item (слайдів).

Інші два елементи (.slider__control) візуально є кнопками. З їхньою допомогою відбуватиметься навігація по слайду, тобто. перехід до попередніх та наступних елементів.

CSS код слайдера chiefSlider :

/* ОСНОВНІ СТИЛІ */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; 50%; /* визначає кількість активних слайдів (в даному випадку 2 */ max-width: 50%; /* визначає кількість активних слайдів (в даному випадку 2 */ ) /* СТИЛІ ДЛЯ КНОПОК "НАЗАД" І "ВПЕРЕД" * / .slider__control ( position: absolute; display: none; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; /* ширина кнопки */ height: 50px; /* висота кнопки */ opacity: .5; /* прозорість */ background: #000; /* колір фону */ . slider__control:focus ( text-decoration: none; outline: 0; opacity: .9; /* прозорість */ ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0; ) .slider__control::before ( content: " "; disp lay: inline-block; width: 20px; /* ширина іконки (стрілочки) */ height: 20px; /* висота іконки (стрілочки) */ background: transparent no-repeat center center; background-size: 100%; 100%; ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Як видно, CSS код слайдера теж є не дуже складним. Основні визначення, за допомогою яких можна налаштувати зовнішній вигляд слайдера, мають коментарі .

CSS код, який визначає кількість активних елементів:

/* визначає кількість активних слайдів (у даному випадку 2) */ flex: 0 0 50%; max-width: 50%;

Цей код встановлює слайдеру кількість активних елементів, що дорівнює 2.

Для того, щоб слайдер, наприклад, мав один активний елемент, ці визначення необхідно змінити наступні:

/* визначає кількість активних слайдів (у цьому випадку 1) */ flex: 0 0 100%; max-width: 100%;

створіння адаптивного слайдераздійснюється за допомогою медіа запитів.

Наприклад, слайдер, який на пристроях з крихітним екраном повинен мати один активний слайд, а на великих - чотири:

Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )

JavaScript код слайдера chiefSlider :

"use strict"; var multiItemSlider = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // основний елемент блоку _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // обгортка для.slider-item_s = _mainElement.querySelectorAll(".slider__item"), // елементи (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // елементи керування _sliderControlLeft = _mainElement.querySelector(".slider__ кнопка "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // кнопка "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обгортки _itemWid. // ширина одного елемента _positionLeftItem = 0, // позиція лівого активного елемента _transform = 0, // значення трансформації. // масив елементів // наповнення масиву _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 ))); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1)) .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direction === "left") ( if (_<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

Основну дію в коді JavaScript виконує функція _transformItem. Ця функція в залежності від переданого їй напрямку виконує трансформування елемента. slider__wrapper.

Ініціалізація слайдераздійснюється наступним чином:

Var slider = multiItemSlider(".slider") Демо слайдера

Як створити слайдер із зациклюванням?

Зациклювання слайдів можна виконати за допомогою трансформування елементів. slider__item.

Для цього необхідно до кожного елемента.slider__item прив'язати значення його поточної позиції та трансформації.

Найбільш оптимально ці дії можна виконати за допомогою масиву _items:

Var _items =; // наповнення масиву елементами.

Але зв'язати дані з елементами можна виконати не тільки за допомогою масиву, а, наприклад, за допомогою data-атрибутів. Але операції з DOM найповільніші та ресурсомісткі, їх не рекомендується використовувати, коли це можна виконати якось інакше.

Наступний крок - створити функції для обчислення елементів.slider__item з мінімальною і максимальною позицією.

Var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position)< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) (indexItem = index;))); return indexItem; ), getMin: function () ( return _items.position; ), getMax: function () ( return _items.position; ) )

Останній основний крок, який має бути виконати - це доопрацювати функцію _transformItem. А саме додати до неї код, який змінюватиме позицію елемента .slider__itemта виконувати його трансформацію.

Var _transformItem = function (direction) ( var nextItem; if (direction === "right") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = )  _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -=  _step; ) if (direction === "left") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

Насправді, тут все просто.
Наприклад, для того щоб здійснити перехід до наступного слайду спочатку в масиві items шукається елемент з більшою позицією, ніж у поточного крайнього правого елемента.slider__item .
Якщо такий елемент у масиві є , то виконується трансформація элемента.slider__wrapper (тобто дії, як і алгоритмі без зациклювання).
А от якщо такого елемента немає, то крім трансформації.slider__wrapper, виконується ще низка дій.  По-перше, в масиві items шукається елемент з мінімальною позицією.  Після отримання цього елемента, йому встановлюється позиція, значення якої дорівнюватиме значення поточного правого елемента + 1.  Ну і звісно виконується його трансформація, на кількість відсотків, що він опинився наприкінці , тобто.  після останнього елемента.

Для початку попереднього слайду виконуються аналогічні дії, але навпаки.

Крім цього для слайдера із зациклюванням не потрібно перемикати видимість кнопок "Вліво" та "Вправо".  Дані кнопки в цій версії слайдера відображатимуться завжди.
Щоб це виконати необхідно:
видалити клас slider__control_show у елемента керування "Вправо";
 
в CSS для селектора.slider__control змінити значення властивості display на flex.
Демо слайдера 
Як створити слайдер із зациклюванням та автоматичною зміною слайдів?
Запрограмувати автоматичну зміну слайдів через певні проміжки часу можна за допомогою функції setInterval.
Var _cycle = function (direction) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval);
Функція setInterval у цьому прикладі запускатиме функцію _transformItem через певні інтервали часу, рівні значення зміною _config.interval .
Крім цього, зупинку автоматичної зміни слайдів бажано ще додати при піднесенні курсору до слайдера.
Здійснити цей функціонал можна так:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_inter  _config.direction); ));
Як зупинити автоматичну зміну слайдів, якщо елемент не видно користувачеві?
Вимкнути автоматичну зміну слайдів доцільно у двох випадках:
коли сторінка (на якій розташований цей слайдер) є не активною;
 
коли слайдер знаходиться поза межами області видимості сторінки.
Обробку першого випадку можна здійснити за допомогою події visibilitychange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Функція для обробника події visibilitychange:
// обробка події "Зміни видимості документа" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); )  )
Обчислення видимості елемента можна організувати за допомогою функції _isElementVisible:
Function _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight ||  return document.elementFromPoint(x, y); );if (rect.right< 0 || rect.bottom < 0 || rect.left >vWidth ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains  (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
Розмістити виклик _isElementVisible можна, наприклад, на початок функції _transformItem .  Ця дія дозволить скасувати автоматичну зміну слайдів, якщо слайдер в даний момент знаходиться поза viewport.
Var _transformItem = function (direction) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Слайдер, який реагує на зміну розмірів вікна браузера
Цей варіант адаптивного слайдера відрізняється від попередніх тим, що він дозволяє змінити кількість активних елементів (слайдів) при зміні розмірів вікна браузера.  Зазвичай користувачі не змінюють розмір браузера, але це може статися.
Реалізовано це за допомогою використання події resize та масиву _states.  Масив використовується для обчислень.  Його застосування дозволить не виконувати переініціалізації слайдера, коли це не потрібно.
Одним із ефективних способівпривернення уваги користувачів на сторінці сайту це створення анімації, що рухається.  Елементи анімації допомагають більш наочно розповісти та показати користувачам про ваш продукт.  Останнім часом велику популярність отримали панелі, що виїжджають, а також ряд інших ефектів, які з'являються при прокручуванні або натисканні на картинку.  Вони також відомі як слайдери, каруселі та панелі, що виїжджають.  У цій статті йтиметься про створення адаптивного слайдера карусельного типу, з плавним ефектом автопрокрутки.
На сьогоднішній день в мережі представлено сотні оглядів з посиланнями на готові рішення, проте більшість з них містять безліч функцій, що не використовуються, які значно знижують працездатність слайдера, так само як і сповільнюють завантаження сайту в цілому.  Професійні веб-розробники завжди прагнули створювати гнучкі в налаштуванні програмні продукти з низьким порогом входження додаткових бібліотек та плагінів.  Саме тому в роботі нашого скрипту задіяно мінімальні вимоги для організації такого слайдера.  Функціонал роботи дозволяє задавати інтервал перемикання, швидкість, а також вибір певного слайду.  Нижче наведено ряд пермінних, які регулюють роботу самого слайдера.
timeList- швидкість перемикання слайду
TimeView- час показу
RadioBut- кнопки під слайдом для швидкої навігації.  За промовчанням значення true, якщо використовувати false, то кнопки зникнуть.
А тепер давайте приступимо!  Створимо та відкриємо файл index.htm 
 

 

 

 

 

 

 

 
 

 
У поданому коді як бачимо нічого складного немає, slider-wrapвизначає загальне становищеі вирівнює слайдер посередині екрана.  Параметр active-slideзадає розмір та висоту картинки згідно з її довжиною.  І sliderпоказує лише активну картинку.
Тепер створимо та відкриємо файл style.cssі пропишемо туди потрібну нам розмітку:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto;  margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-  user-select: none; -o-user-select: none; user-select: none;  padding: 0;-webkit-transition: 1s; -o-transition: 1s; transition: 1s;  -out; transition-timing-function: ease-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .  100%; .  :hidden;text-indent:-9999px;background:url(radioBg.p  ng) center bottom no-repeat;  ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( display  :block;width:40px;height:100%;position:absolute;top:0;overflow:hidden;text-indent:-999px;background:url("arrowBg.png")  z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px;  nextbutton:hover ( opacity:1; )
У якості стилю slider-wrapпропишіть width- максимальну довжину ваших картинок.
У якості стилю #slider (width: calc(100% * 4); )і .slide (width: calc(100%/4); )вкажіть кількість картинок у вашому слайдері.  У прикладі їх 4.
Якщо стрілки вперед/назад заважають видимості вашого слайдера, їх можна зробити невидимими і з'являтися вони будуть при наведенні.  Для цього у параметрах prewButі nextBut, задайте властивості opacity значення 0.
Тепер створимо та відкриємо наш файл slider.js, в якому буде код слайдера.  Не забудьте підключити бібліотеку jQuery.
$(document).ready(function() ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide  = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide")  .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == "  prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $("  #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width(  ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active"  ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("<>") .prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(function  ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + index + "";
 });
 $("
"+ adderSpan +"
").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function()( var goToNum  = parseFloat($(this).text()); animSlide(goToNum + 1); )), var pause = false;  ("next")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); pause = true;), function()(pause = false; rotator()  ; ));var clicking = false; var prevX; $(".slide").mousedown(function(e)( clicking = true; prevX = e.clientX; ));  function() ( clicking = false;)); $(document).mouseup(function()( clicking = false; )); $(".slide").mousemove(function(e)( if(clicking == true  ) ( if(e.clientX)< prevX) { animSlide("next"); clearTimeout(slideTime); }
 if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) clicking = false;  )));  $(".slide").hover().css("cursor", "pointer");  rotator();  ));
Функція animSlideприймає три види значень: next, prew, числове значення.  Параметр next перемикає наступний слайд, prew повертає попередній, а числове значення - це заданий слайд, вибраний через радіо кнопки під слайдом.
У представленому слайдері використовувалися зображення з веб-ресурсу https://pixabay.com/.
Це адаптивний слайдер тач, написаний на jQuery.  У движку даного плагіна використовуються CSS3 анімації, але в той же час передбачені фолбеки для більш старих версій браузерів.  Glide.js простий та легковажний.
Використання
1. Підключаємо jQuery
Єдина залежність плагіна - це jQuery, який ми повинні підключити насамперед:
 
2. Підключаємо Glide.js
 
3. Додаємо html
Підключимо базові стилі.
 
Накатаємо html структуру слайдера.
 

 

4. Ініціалізація
Запускаємо слайдер із налаштуваннями за замовчуванням.
 
… або налаштовуємо його під себе
 
Налаштування
Список доступних параметрів:
Параметр
Значення за замовчуванням
Тип
Опис
autoplay
4000

int/bool
Автопрокручування (false для відключення)
hoverpause
true
bool
Призупиняти автопрокручування при наведенні миші на слайдер
animationTime
500

int
!!!  Ця опція працює, якщо браузер НЕ підтримує css3.  Якщо css3 підтримується браузером, цей параметр потрібно змінити в.css файлі!!!
arrows
true
bool/string
Показати/приховати/прикріпити стрілки.  True для відображення стрілок у контейнері слайдера.  False для приховання.  Також можете вказати назву класу (приклад: ".class-name") для прикріплення особливого HTML коду
arrowsWrapperClass
slider-arrows
string
Клас, який присвоюється контейнеру зі стрілками
arrowMainClass
slider-arrow
string
Основний клас для всіх стрілок
arrowRightClass
slider-arrow--right
string
Клас для правої стрілки
arrowLeftClass
slider-arrow - left
string
Клас для лівої стрілки
arrowRightText
next
string
Текст для правої стрілки
arrowLeftText
prev
string
Текст для лівої стрілки
nav
true
bool/string
Показати/приховати/прикріпити навігацію по слайду.  True для відображення.  False для приховання
navCenter
true
bool
Навігація за центом
navClass
slider-nav
string
Клас для навігаційного контейнера
navItemClass
slider-nav__item
string
Клас для елемента навігації
navCurrentItemClass
slider-nav__item--current
string
Клас для поточного елемента навігації
keyboard
true
bool
Прокручувати слайд під час натискання кнопок ліворуч/праворуч
touchDistance
60

int/bool
Підтримка дотику (тач).  False для вимкнення цієї можливості.
beforeInit
function()()
function
Колбек, який запуститься перед ініціалізацією плагіна
afterInit
function()()
function
Колбек, який запуститься за ініціалізацією плагіна
допереходу
function()()
function
Колбек, який запуститься перед прокручуванням слайдера
afterTransition
function()()
function
Колбек, який запуститься після прокручування слайдера
API
Для використання API запишіть glide в змінну.
Var glide = $(".slider").glide().data("api_glide");
Тепер вам доступні методи API.
Glide.jump(3, console.log("Wooo!"));
.current() - Повернення номера поточного сайду
.play() - Почати автопрокручування
.pause() - Зупинити автопрокручування
.next(callback) - Прогорнути слайдер вперед
.prev(callback) - Прогорнути слайдер назад
.jump(distance, callback) - Перейти на певний слайд
.nav(target) - Прикріпити навігацію до певного елементу (наприклад: "body", ".class", "#id")
.arrows(target) - Прикріпити стрілки до певного елементу (наприклад: "body", ".class", "#id")

1. jQuery плагін «Fresco»
Адаптивна галерея jquery (змінює розмір при зміні роздільної здатності екрана), що відображається у спливаючому вікні з мініатюрами та підписами зображень.  Jquery галерея «Fresco» коректно працює у більшості браузерів у тому числі: IE6+, Firefox 3+, Chrome 5+, Opera 9+.  Безкоштовна версія цього плагіна може використовуватись лише на некомерційних проектах.
2. Слайдер "Adaptor"


Слайдер із різними ефектами переходів (7 різних ефектів, у тому числі 3D).  Проект на Github.
3. Плагін слайдера з різними ефектами "jQ-Tiles"


Плагін з різними ефектами переходу, з швидкістю зміни слайдів, що настроюється, з функцією автопрокрутки.
4. jQuery плагін "Sly"


Плагін для реалізації вертикального та горизонтального скроллера.  Проект на Github.
5. Анімоване CSS3 меню "Makisu"


6. Просте слайд-шоу


7. Функціональний jQuery слайдер "iView Slider v2.0"


Слайдер контенту/слайдшоу (як слайд може бути не тільки зображення, а також відеоролики та інший HTML вміст).  Для навігації можна використовувати: мініатюри, кнопки Вліво/Вправо та за допомогою клавіатури.  Проект на Github.com.
8. Набір jQuery плагінів «Vanity»


У наборі 7 плагінів: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder та jCollapse.  Набір цих рішень допоможе вам у реалізації слайдера, підказок, табів, спливаючих описів зображень та ін.
9. Hover CSS3 ефект


10. CSS3 меню, що випадає


11. iOSslider


Слайдер заточений під роботу на мобільних пристроях.
12. CSS3 індикатор завантаження


13. CSS3 ефект при наведенні


14. «Product Colorizer» jQuery плагін


Плагін є легким рішенням для реалізації перегляду продуктів у різних варіантах кольору (актуально, наприклад, для інтернет-магазинів одягу, щоб дати відвідувачам вибрати колірну гамутовару з кількох варіантів).  Для роботи плагіна необхідно лише два зображення для кожного продукту (усі кольори накладатимуться у вигляді маски).  Плагін працює у всіх основних браузерах, включаючи IE7+ (працюватиме і в IE6, якщо ви пофіксуйте відображення прозорості PNG).  Проект на GitHub.
15. CSS3 анімовані діаграми


16. Створення overlay-ефекту при натисканні зображення


Під час натискання зображення воно затемняється, йдучи на задній план, і з'являються пункти з підписами.  Таким чином, можна дати короткий опис елементів, розташованих на зображенні.
17. Навігація по сторінці у вигляді меню, що випадає


Рішення для реалізації зручної навігації за документом у вигляді меню.  Зміст зафіксований зверху екрана і завжди залишається у зору відвідувача.  При виборі розділу в меню відбувається плавне прокручування сторінки до вибраної частини документа.
18. CSS3 галерея з ефектом при наведенні


При наведенні курсору на зображення відбувається швидка зміна фотографій.  Галерея реалізована у двох варіантах: з описом знімків, що з'являється після того, як відвідувач відведе курсор з галереї та без опису.
19. jQuery слайдер з ефектом Parallax


20. CSS3 анімація при наведенні на блоки


21. CSS3 jQuery спливаюча панель
Натисніть стрілку внизу екрана на демонстраційній сторінці, щоб побачити спливаючі іконки.
22. Безкоштовна HTML5 галерея зображень «Juicebox Lite»


Дуже функціональна нова галерея зображень для сайту.  Галерея може бути як з мініатюрами так і без них, з зображенням і без, може розгортатися на весь екран або відображатися на сторінці з фіксованими розмірами.  На сторінці демо ви можете вибрати вид галереї, який вам сподобається.  Для завантаження доступна безкоштовна версія галереї.  За більш сучасний функціонал і за те, щоб прибрати логотип розробника, доведеться заплатити.
23. Плагін "JQVMap"


24. CSS3 слайдер з Parallax-ефектом


25. jQuery галерея фотографій із мініатюрами


Адаптивна галерея, розміри зображень та мініатюр змінюються разом із розміром вікна браузера.
26. jQuery плагін слайдера контенту «Horinaja»


Плагін легкий в установці, що налаштовується, кросбраузерний.  Як слайд може виступати будь-який HTML контент, не тільки зображення.  Прокручувати слайди можна за допомогою колеса миші, коли курсор знаходиться на області слайда.
27. Плагін jQuery слайдера "Pikachoose"


У трьох варіаціях: реалізація простої зміни зображень без опису та мініатюр;  слайдер з підписами зображень та мініатюрами;  слайдер із мініатюрами та доданим відкриттям збільшеного зображення у спливаючому вікні з ефектом FancyBox.  Останню версію завжди можна знайти на Github.
28. Декілька користувачів CSS стилізацій випадаючих списків


П'ять різних стильових оформлень списків з використанням різних CSS технік.
29. Ресторане меню з анімованим 3D ефектом


Цікаве CSS jQuery представлення інформації на сторінці.  Після натискання на посилання розкривається буклет-меню і відвідувач може у вікні, що спливає, прочитати докладніше про надані страви.  Анімація неправильно відображається в IE.
30. Плагін «Elastislide»


Реалізація гумової адаптивної каруселі(вертикальна та горизонтальна карусель зображень) та галереї зображень.  При зменшенні вікна браузера зменшується кількість зображень до певного мінімального значення і далі масштабується розмір зображень, що залишилися.  Проект на Github.
31. Свіжий CSS3 jQuery слайдер "Slit Slider"


Адаптивний плагін слайдера (ширину можна задавати у відсотках і він автоматично змасштабується) у двох стильових виконаннях з цікавим анімованим ефектом при зміні слайдів (слайд розрубується навпіл і роз'їжджається в різні боки, а його місце займає новий).  Можлива навігація за допомогою клавіатури.  Свіжа версія завжди на Github.
32. Нова версія 3D слайдера зображень "Slicebox"


Нова версіяіз внесеними змінами та додаванням нових функцій: тепер 3D слайдер став масштабованим, побачити це можна при зменшенні вікна браузера;  додано підтримку Firefox;  в описі до слайду можна використовувати HTML контент (раніше опис підтягувався з атрибута посилання без можливості використовувати в ньому HTML теги).  На демонстраційній сторінці можна переглянути 4 варіанти використання плагіна. остання версіяживе на Github.com.
Ефект дуже схожий на Flash галерею 3D CU3ER (демо, завантажити), тільки виконаний цей 3D слайдер не за допомогою flash технологій, а за допомогою javascript.
33. jQuery плагін «PFold»


Експериментальне рішення.  Плагін реалізує 3D ефект із імітацією розгортання записки. Різні варіантивиконання: з трьома розворотами, з двома розворотами та розворот з подальшим центруванням розгорнутої записки.
34. jQuery плагін «Windy»


Плагін для навігації за контентом, наприклад, за зображеннями.  При прогортанні фотографій вони розлітаються в різні боки (ефект чимось нагадує роздачу карток карткової грипокер).  Для навігації можна використовувати кнопки ліворуч/праворуч або повзунок (дивіться різні варіанти на демонстраційній сторінці).  Проект на