Без слайдера не обходиться жоден популярний і часто відвідуваний сайт. Він підвищує інтерес відвідувача до контенту, акцентує увагу на виділеному матеріалі. Являє собою блок слайдів, які змінюють один одного через певний часовий інтервал. Написані на jQuery слайдери мають різний функціонал: найпростіші працюють тільки в режимі послідовного перегляду, складні дозволяють прокручувати карусель вручну, а елементи слайдера містять посилань з повним описом продукту.
Деякі плагіни інтегруються безпосередньо в код сторінки, інші підключаються в системі управління контентом. Розробник налаштовує час перемикання слайдів, ефекти зміни елементів, додає нові зображення і т. д.
Слайдери
Всі слайдери працюють схожим чином: підключаються файли зі стилями і динамікою, редагуються налаштування jQuery, CSS. Плагін працює після того, як в тегах потрібного блоку з’являться необхідні класи.
Готові слайдери на jQuery прискорюють процес розробки і подальшого підключення. Всі вони відрізняються оформленням, кількістю ефектів, але працюють практично однаково.
Distractful
Це простий приклад готового jQuery-слайдера. За промовчанням:
- автоматичне перемикання слайдів;
- з елементів – тільки пагинация, стрілки приховані, але можуть бути включені пізніше;
- вимкнено ефект зупинки каруселі;
- адаптований під мобільні пристрої.
Якщо плагін був підключений некоректно, в консолі налагодження з’являється повідомлення з рекомендацією підключити файл jQuery.
Neoslide
Приклад слайдера на jQuery від китайських розробників містить всього 2 файлу: JavaScript і CSS. Для підключення в потрібному місці блоку зазначається наступний код:
Перед закриваючим тегом body слайдер активується з допомогою такого запису:
$(function() {
$(‘.banner’).neoslide();
});
За замовчуванням слайдер має такі розміри: 1390 px завширшки й 450 px у висоту. Час затримки перемикання – 400 мілісекунд, включена пагинация.
Hslider
Відрізняється від попередніх jQuery-слайдерів тим, що він містить велику кількість файлів. Крім основного файлу JavaScript, присутні файли стилів, скрипт завантаження зображень.
Підключення:
Car in the snow
People surfing
$( document ).ready(function() {
$( “.hsldr-container” ).hslider({
navBar: true,
auto: true,
delay: 4000
});
});
Sleek Slider
Sleek Slider – дуже легкий фоновий jQuery слайдер, він важить всього 2 Мб. Для підключення вписуються посилання на останню версію jQuery і SleekSlider.
Слайдер підтримує svg-зображення стрілок для виведення вліво-вправо.
Для вбудовування структури HTML використовуються класи sleekslider, slide active bg-1, slide-container, slide-content.
Slide 1 Content Here
Slide 2 Some Content Here
Slide 3 Content Here
Slide 4 Some Content Here
Slide 5 Content Here
Navigation Arrows with Thumbnail
test
test
- 01 Slide
- 02 Slide
- 03 Slide
- 04 Slide
- 05 Slide
Крім звичного способу перемикання слайдів стрілками, присутня можливість перегортання кліком миші по відповідних вкладках. Цей блок знаходиться в нижній частині слайдера, а в коді заданий тег nav з класом tabs.
Примітно, при кліці на стрілки перед переміщенням до наступної вкладки з’являється міні-зображення. Воно є кликабельним елементом і також призначене для перемикання.
Ініціалізація каруселі відбувається таким чином:
$(document).ready(function(){
$(‘.sleekslider’).sleekslider({
thumbs: [‘1.jpg’, ‘2.jpg’, ‘3.jpg’,’4.jpg’,’5.jpg’],
labels:[‘Slide 1’, ‘Slide 2’, ‘Slide 3’, ‘Slide 4’, ‘Slide 5’],
speed: 6000 // transition speed
});
})
В даному прикладі задана швидкість 6 секунд, елементами каруселі є зображення 1.jpg – 5.jpg іменами вкладок є Slide 1 – Slide 5.
PaW Carousel
Повноекранний jQuery слайдер важить всього 6 кілобайт, присутня можливість підключати кілька каруселей на одній сторінці. PaW відображається на різних екранах, при цьому є можливість обрізати елементи при досягненні певних розмірів екрану. Підтримується вставка не тільки зображення, але і відео. Працює у всіх популярних браузерах, підтримується Internet Explorer 7+.
Для активації необхідно підключити всі файли, включаючи стилі, і викликати:
$(function(){
$(‘.paw-carousel’).Ти(args);
// If you want to add another carousel page on the same
$(‘.paw-carousel-2’).pawCarousel();
});
В аргументах методу pawCarousel вказуються значення:
- pawCarousel – ім’я кожного елемента каруселі, за замовчуванням – paw-carousel-item;
- carouselNavItemCls – імена елементів пагинации, за замовчуванням – paw-carousel-nav-item;
- activeCls відповідає за відображення пагинации на сторінці, спочатку є active;
- з допомогою animSpeed встановлюється швидкість перемикання слайдів.
Обгортки плагіна мають класи paw-carousel-wrap > paw-carousel > paw-carousel-items-wrap, а кожний елемент – paw-carousel-items. Стрілки позначаються як paw-carousel-prev і paw-carousel-next, а блок пагинации – nav.paw-carousel-thumbs > ul > paw-carousel-nav-item.
Slick
“Слік-слайдер” – функціональний плагін-на jQuery слайдер з широким набором можливостей.
Має більше 10 режимів відображення:
- заповнення всієї ширини батьківського блоку;
- батьківський блок поділений на частини, кількість підблоків вказується в налаштуваннях;
- елементи слайдера можуть мати різну ширину;
- виділення активного слайда за рахунок збільшення розміру;
- використання зображень в якості елементів слайдера;
- автовідтворення;
- додавання та видалення слайдів за допомогою користувальницького інтерфейсу;
- фільтрація;
- відображення активного слайда на іншому екрані;
- перемикання слайдів справа наліво.
Підключення файлу стилів:
Підключення JavaScript:
Ініціалізація:
$(document).ready(function(){
$(‘.your-class’).slick({
setting-name: setting-value
});
});
Your-class – це клас батьківського блоку слайдера.
Налаштування:
bxSlider
Чуйний jQuery-слайдер зображень з великою кількістю налаштувань.
Для початку роботи скачується архів з офіційного сайту, підключаються потрібні файли. Обгортка слайдера повинна мати клас bxslider. Код слайдера на jQuery:
jQuery(document).ready(function(){
jQuery(‘.bxslider’).bxSlider();
});
Властивості плагіна:
CarouFredSel
Горизонтальний слайдер на jQuery дозволяє організовувати як традиційний слайдер, так і карусель. Він відрізняється тим, що не нав’язує розробнику свої елементи управління.
Офіційний сайт надає обширну документацію. Плагін активується за аналогією з іншими: підключаються всі файли, в нижній частині коду ініціалізується скрипт, в аргументах зазначаються налаштування.
Налаштування:
- infinite визначає, чи повинен бути слайдер нескінченним;
- direction відповідає за напрямок прокрутки, приймає значення left або right;
- у width встановлюється ширина елементів;
- align вирівнює елементи;
- cookie запам’ятовує поточне положення слайдера.
Cloud Carousel
Крім традиційних методів управління перемиканням слайдів, надається можливість прокручування роликом миші.
Слайди розміщуються на виділеному полі, його розміри задаються у налаштуваннях властивостями xPos і yPos. Тут же вказуються класи стрілок вліво-вправо і опис слайдера.
Elastislide
Реалізує кілька варіантів слайдера-каруселі, є адаптивним.
Для початку роботи потрібно отримати файли з GitHub, підключити на сторінку. Передбачено підключення картинок динамічно за допомогою PHP.
var $items = $(‘
‘);
$(‘#carousel’).append($items).elastislide( ‘add’, $items );
Orientation задає спосіб перемикання: вертикально чи горизонтально. Speed відповідає за швидкість зміни слайдів, за умовчанням встановлено значення 500. Мінімальна кількість слайдів у блоці каруселі встановлюється в minItems. Якщо планується використовувати в якості елементів тільки зображення, це можна записати у властивості imgSizeItemSelector. Перший слайд має індекс 0, що є стартовим елементом. Встановленням потрібного індексу змінюється порядок. Автопереключення записується як autoSlide: true. Відступи від зображення вказуються властивості margin, ширина кордону – border.
jCarousel Lite
Займає гідне місце серед популярних плагінів. Це потужна галерея, яка має багато налаштувань, підходить для вирішення будь-якої задачі. Мінімальні вимоги до браузеру: IE 6, Firefox 3, Opera 9.5, Safari 3.
Параметри:
- btnPrev і btnNext вказують на клас або ID кнопки перемикання;
- прокрутити коліщатком миші встановлюється в mouseWheel;
- вертикальна зміна слайдів здійснюється за допомогою властивості vertical;
- circular – нескінченне прокручування;
- кількість видимих слайдів у блоці вказується в visible;
- в start записується порядок елемента, з якого починається галерея.
3D-карусель
Слайдер не відрізняється широкою функціональністю.
Його головна перевага – незвичайне оформлення. Центральний елемент має найбільший розмір, всі інші праворуч і ліворуч, – менший. Чим далі слайд від центру, тим він менше. Карусель не стилізована, всі ефекти задаються за допомогою JavaScript.
Feature Carousel
Оформлений так, що поточний елемент має збільшений розмір, стрілки розташовуються з боків нижче інших елементів. Попередні і наступні слайди мають прозорість 0.5.
Віджет підходить для презентації ключових матеріалів. Є кроссбраузерным, має гнучкі налаштування. Оформлення налаштовується за допомогою jQuery і CSS. Дозволяє відображати лише одну карусель на сторінці.
Активація:
$(‘#carousel’).featureCarousel({});
Rcarousel
Для Rcarousel, на відміну від інших плагінів, виділений цілий сайт.
Розробник надає докладний опис можливостей слайдера, розповідає про оновлення до нової версії. Однак останній апдейт стався в 2012 році, за цей час сталося багато змін, деякі функції можуть не відповідати сучасним вимогам.
Працює в таких браузерах:
- Internet Explorer 7+;
- Firefox 3.0+;
- Chrome;
- Opera 10.10+;
- Safari 4.0.5+.
Конфігурації;
- visible – зазначається кількість видимих елементів;
- step – кількість елементів, які змінюються при кожному натисканні;
- width – ширина кожного елемента каруселі;
- speed – швидкість зміни слайдів;
- orientation – орієнтація може бути вертикальною і горизонтальною.
Додати елементи навігації можна через додавання тегів з id ui-carousel-next і ui-carousel-prev. Якщо потрібно прикріпити стрілки переходів зі своїми класами і тегами, в navigation зазначаються ці значення.
navigation: {
prev: “.someFancyClass”,
next: “#andFunnyID”
}
Тепер кнопка для перемикання на попередній елемент повинна мати клас someFancyClass, на наступний – тег andFunnyID.
Pure CSS3 slider
Функціонал побудований повністю на CSS. Щоб почати ним користуватися, необхідно підключити єдиний файл стилів і додати таку структуру.
Your title
Your description
Your title
Your description
Your title
Your description
Your title
Your description
В цьому плагіні немає способу модифікувати налаштування, як це відбувається в плагінах на JavaScript. Щоб вибрати один з декількох способів анімації, підключаються різні файли. Для ковзання елементів зліва направо – slider-ltr.css, справа наліво – slider-ttb.css. Горизонтальна зміна слайдів зверху вниз здійснюється з допомогою slider-btt.css, знизу вгору – slider-simp.css.
Висновок
Всі плагіни працюють схожим чином. Для активації потрібно додати відповідний клас у блок-обгортку. Те ж саме проробляється, щоб вивести на екран стрілки або пагінацію. Плагін ініціалізується перед закриваючим тегом block у такому вигляді:
$( “клас або id блоку” ).метод( аргументи );
У простих слайдерах немає можливості тонко налаштовувати функціонал – користувач додає основні значення, змінює швидкість зміни елементів і т. д. В складних плагінах можна міняти все: починаючи зі способу зміни слайдів, закінчуючи орієнтацією відображення елементів.
