Слайдер ResponsiveSlides. Установка та налаштування

40

Від автора: вітаю вас, друзі. У цій статті ми продовжимо роботу зі слайдерами jQuery і на черзі у нас простий адаптивний слайдер — ResponsiveSlides.js. Спробуємо познайомитися з документацією, а також встановити і налаштувати слайдер ResponsiveSlides.js.

Отже, друзі, сьогодні у нас на черзі один з моїх улюблених слайдерів — це слайдер ResponsiveSlides.js. Судячи з назви, слайдер спочатку адаптивний, і це насправді так, що є безумовним плюсом сьогодні.

Крім того, плагін ResponsiveSlides.js — це легкий. Поточна його версія (на момент написання статті це версія 1.55) важить всього декілька кілобайт. Що ж ми отримуємо натомість витрати такої малої кількості трафіку? Повноцінний слайдер, який має все необхідне: велику кількість налаштувань, красивий ефект зміни слайдів, елементи керування слайдами, ну і само-собою, адаптивність і зовсім невелику вагу плагіна.

Спробуємо встановити слайдер. Для цього нам необхідно завантажити його з GitHub або ж можете взяти архів з исходников до уроку. Документація офіційного сайту підказує нам, що для роботи слайдера необхідна бібліотека jQuery і, власне, сам плагін responsiveslides.js (або його стисла версія responsiveslides.min.js). Давайте підключимо їх.

Також нам знадобиться розмітка слайдера у вигляді простого списку:

Наступним кроком нам пропонується додати декілька стильових правил, які оформлять наш слайдер. Щоб не копіювати стилі з сайту, ми можемо просто підключити файл стилів responsiveslides.css, який є в архіві отриманого раніше слайдера.

Залишилося ініціалізувати плагін всього одного рядка коду:

$(function() {
$(«.rslides»).responsiveSlides();
});

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

Слайдер ResponsiveSlides. Установка и настройка

Вже непогано, але не вистачає елементів управління. Їх нескладно додати опцією pager зі значенням true:

$(«.rslides»).responsiveSlides({
pager: true
});

Слайдер ResponsiveSlides. Установка и настройка

Стилі для оформлення навігаційної панелі взяв я документації, трохи змінивши їх під світле оформлення сторінки. Також можна використовувати на власний розсуд та інші установки слайдера. Наприклад, опція manualControls дозволить реалізувати навігаційну панель, на якій замість номерів слайдів будуть їх превью. Опція nav дозволяє додати навігаційні стрілки в лівій і правій частинах слайдів. Опція speed дає можливість керувати швидкістю анімації і т. д.

Пробуйте, експериментуйте. Впевнений, слайдер вам доведеться по душі. На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!