Метою створення 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.
...
<link href="/path/to/ideal-image-slider.css" rel="stylesheet">
<link href="/path/to/themes/default/default.css" rel="stylesheet">
...
...
<script src="/path/to/ideal-image-slider.js"></script>
Потім необхідно налаштувати ваш слайдер HTML, щоб він з'являвся на вашій сторінці там де ви хочете. Це повинно виглядати приблизно так:
<div>
<img src="img/1.jpg">
<img src="">
<img src="">
...
</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+
Ще немає коментарів