Ideal Image Slider

6 хв. читання

Метою створення 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+

Демо

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація