Введение

Используя синтаксис ES6, создаётся класс карусели. Код написан на чистом JavaScript без зависимостей от сторонних библиотек. Он адаптируется под размер родительского контейнера и совместим со всеми экранами устройств. Код можно расширять.

Простое руководство

Сначала создайте статический HTML-код для карусели следующим образом:

<div id="carousel" class="container">
    <ul>
        <li>
            <a href="http://baidu.com/">
                <img src="img/1.jpg" alt="">
            </a>
        </li>
        <li>
            <img src="img/2.jpg" alt="">
        </li>
        <li>
            <img src="img/3.jpg" alt="">
        </li>
        <li>
            <img src="img/4.jpg" alt="">
        </li>
    </ul>
</div>

Затем создайте экземпляр класса Carousel.

let playBox = new Carousel({
    containerId: 'carousel',
    showSwitchBtn: false,
    showSwitchCtrl: true,
    playSlowMotion: true,
    playAuto: true,
    playInterval: 2000,
    playFn: function() {
        console.log(playBox.index);
    }
});

Здесь:

API-методы

Можно расширить функциональность карусели с помощью API-методов

| Имя API | Тип | Возвращаемое значение | Описание | --- | --- | --- | | index | Attr | Индексное значение | Получить текущий индекс | set(Number:index) | Method | Индексное значение | Немедленно перейти к позиции с индексом index | previous(null) | Method | Индексное значение | Перейти к предыдущей позиции и вернуть индекс после перехода | next(null) | Method | Индексное значение | Перейти к следующей позиции и вернуть индекс после перехода | reset(null) | Method | Нет | Сбросить карусель