Ideal Image Slider
Метою створення Ideal Image Slider було бажання мати простий у використанні слайдер з базовим набором функціоналу, так щоб додаткові функції можна бути додавати в якості "розширень". Ось “ідеали” та основні функції, які хотілось мати:
-
HTML5 (SEO оптимізований)
-
CSS3 переходи (кілька простих переходів, як slide/fade)
-
Навігація “Вліво-вправо” (підтримка touch)
-
Адаптивність
-
HiDPI (retina) підтримка
-
Підтримка ARIA
-
Простота в установці (без залежностей)
-
Легко розширюється
-
Використовує прогресивне розширення
-
Open source
І, як приклад, ось деякі особливості, які не повинні бути в основі, але можуть бути включені, як додаткові модулі:
-
Теми або скіни
-
Більш варіантів переходів (вони повинні легко додаватися)
-
“Кульова” навігація
-
“Мініатюрна” навігація
-
Повноекранний слайдер
-
Завантаження за запитом
-
Підтримка відео/аудіо
Вимоги
Немає, Ideal Image Slider написано на vanilla JS і він не має ніяких залежностей.
Знайомство
Ви можете вручну встановити слайдер вручну, завантаживши цей репозиторій або ви можете скористуватись Bower, для цього виконайте наступну команду:
bower install ideal-image-slider --save
Далі вам потрібно вставити лінк на CSS-файл в секцію <head> вашого HTML і додати скрипт перед тегом </body> в HTML-код. Примітка: при необхідності можна включити CSS файл теми в тег <head>.
<html>
<head>
...
<link rel="stylesheet" href="/path/to/ideal-image-slider.css">
<link rel="stylesheet" href="/path/to/themes/default/default.css">
...
</head>
<body>
...
<script src="/path/to/ideal-image-slider.js"></script>
</body>
</html>
Потім необхідно налаштувати ваш слайдер HTML, щоб він з'являвся на вашій сторінці там де ви хочете. Це повинно виглядати приблизно так:
<div id="slider">
<img src="img/1.jpg" src="" alt="Minimum required attributes">
<img data-src="img/2.jpg" src="" alt="Use data-src for on-demand loading">
<img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="Use data-src-2x for HiDPI devices">
...
</div>
Є кілька речей, щодо структури зображень в слайдері, яі потребують уваги:
-
Це слайдер зображень, тож тільки зображення підтримуються. Будь-який інший контент буде видалено.
-
Ви можете використовувати data-src атрибут для завантаження ваших зображень "на вимогу" (тобто зображення не будуть завантажуватися до тих пір, поки вони не є потрібними).
-
Перше зображення не повинне використовувати data-src, так воно буде завантажене, навіть якщо JS не виявлено.
-
Якщо ви вкажете data-src-2x для зображення, воно буде використовуватись на пристроях з підтримкою HiDPI.
Нарешті, Ви можете створити свій слайдер за допомогою наступного коду Javascript:
new IdealImageSlider.Slider('#slider');
Якщо ви хочете змінити налаштування або використати API:
var slider = new IdealImageSlider.Slider({
selector: '#slider',
height: 400, // обов'язково, але може бути встановлено в CSS
interval: 4000,
});
slider.start();
Примітка: якщо ви не передасте height конструктору Javascript, необхідно встановити її у вашому CSS.
Налаштування
-
selector - CSS селектор для слайдера
-
height - висота слайдера (px)
-
interval - період очікування для переходу до наступного слайда (мс)
-
transitionDuration - тривалість переходу (мс)
-
effect - ефект переходу
-
disableNav - відключення навігації (також відключає сенсорний екран і клавіатурну навігації)
-
keyboardNav - перемикання клавіатури
-
previousNavSelector - селектор для кастомного попереднього елемента nav
-
nextNavSelector - селектор для кастомного наступного елемента nav
-
classes - список класів, які повинні використовуватися слайдером. Ймовірно, не повинні змінюватись
Події
Події callback-функції можуть бути передані з налаштуваннями. Наприклад:
new IdealImageSlider.Slider({
selector: '#slider',
onStart: function(){
console.log('onStart');
}
});
-
onInit - callback-функції, яка виконується, коли слайдер і перші зображення були завантажені
-
onStart - callback-функції, яка виконується, коли слайдер почав грати
-
onStop - callback-функції, яка виконується, коли слайдер перестав грати
-
onDestroy - метод зворотного виклику, який спрацьовує, коли слайдер “знищено”
-
beforeChange - callback-функція яка спрацьовує перед зміною слайду
-
afterChange - зворотний виклик, який викликається після зміни слайда
API
Щоб використати методи API, необхідно зберегти об'єкт слайдера. Наприклад:
var slider = new IdealImageSlider.Slider('#slider');
slider.start();
-
start() - запуск. Зверніть увагу, що слайдер буде автоматично зупинений при використанні навігації
-
stop() - зупинити слайдер
-
previousSlide() - перехід до попереднього слайда
-
nextSlide() - перехід до наступного слайда
-
gotoSlide(індекс) - перехід до першого слайда (1 індексується)
-
destroy() - знищиення слайдера
-
get(attribute) - отримати значення атрибута (атрибути використовуються, в основному, внутрішньо)
-
set(атрибут, значення) - встановити атрибут. Може бути корисно для зберігання призначених для користувача даних
Браузерна підтримка
Ideal Image Slider було протестовано на:
-
Chrome
-
Firefox
-
Safari (Desktop + Mobile)
-
Opera
-
IE9+
Демо
-
Стандартний Слайдер
-
З допомогою API
-
З допомогою Подій
-
Кілька Слайдерів
590 7
GR: 3.975k
Коментарі:
1
dreamminister
a як на рахунок стандартного caption'а?