Вступление #

Слайдер с гибкими настройками. Логика слайдера реализована на базе splide.js.

Для работы можно использовать по умолчанию класс .js-slider и специальную разметку.

Установка #

Пример разметки и инициализации слайдера.

    <div class="js-slider">
        <div class="splide__track">
            <div class="splide__list">
                <div class="splide__slide"><img src="../assets/images/demo/1.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/2.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/3.jpg"/></div>
            </div>
        </div>
    </div>

    BasicSlider.init('.my-slider');
    BasicSlider.init(document.querySelector('.my-slider'));
    BasicSlider.init(document.querySelectorAll('.my-slider'));

    // или

    BasicSlider.init(); // по умолчанию инициaлизирует элементы с классом .js-slider

Конфигурация #

Настройки, которые указываются при помощи специальных data-атрибутов.

data-slider-options #

В значение указываются параметры для гибкой настройки слайдера, с ними можно ознакомиться на странице офиц.документации.

<div class="js-slider" data-slider-options='{ "type": "fade", "trimSpace": false, "arrows": false, "pagination": false }'>
    <div class="splide__track">
        <div class="splide__list">
            <div class="splide__slide"><img src="../assets/images/demo/1.jpg"/></div>
            <div class="splide__slide"><img src="../assets/images/demo/2.jpg"/></div>
            <div class="splide__slide"><img src="../assets/images/demo/3.jpg"/></div>
            <div class="splide__slide"><img src="../assets/images/demo/4.jpg"/></div>
            <div class="splide__slide"><img src="../assets/images/demo/5.jpg"/></div>
        </div>
    </div>
</div>

data-slider-padding #

Отдельный data-атрибут для padding.

Принимает след.значения:

    <div class="js-slider" data-slider-padding='{"top": "0px", "left": "50px", "right": "50px", "bottom": "0px"}'>
        <div class="splide__track">
            <div class="splide__list">
                <div class="splide__slide"><img src="../assets/images/demo/1.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/2.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/3.jpg"/></div>
            </div>
        </div>
    </div>

data-slider-breakpoints #

Отдельный data-атрибут для адаптивного режима(breakpoints).

    <div class="js-slider" data-slider-breakpoints='{ "768": {"arrows": false}, "480": {"arrows": false, "gap": "20px", "padding": {"left": "50px", "right": "50px"}} }'>
        <div class="splide__track">
            <div class="splide__list">
                <div class="splide__slide"><img src="../assets/images/demo/1.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/2.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/3.jpg"/></div>
            </div>
        </div>
    </div>

data-slider-mounted-callback #

data-атрибут, который отвечает за callback, вызывается после инициализации слайдера

    <div class="js-slider" data-slider-mounted-callback="console.log('Это скрипт запустится, когда будет инициализирован слайдер')">
        <div class="splide__track">
            <div class="splide__list">
                <div class="splide__slide"><img src="../assets/images/demo/1.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/2.jpg"/></div>
                <div class="splide__slide"><img src="../assets/images/demo/3.jpg"/></div>
            </div>
        </div>
    </div>

Слайдер с миниатюрами #

Для инициализации и настройки миниатюр, необходимо использовать специальные data-атрибуты.

data-slider-thumbs #

data-атрибут для инициализации миниатюр.

<div class="js-slider" data-slider-thumbs="true">
    <div class="splide__track">
        <div class="splide__list">
            <div class="splide__slide" data-slider-thumb="../assets/images/demo/1.jpg"><img src="../assets/images/demo/1.jpg"/></div>
            <div class="splide__slide" data-slider-thumb="../assets/images/demo/2.jpg"><img src="../assets/images/demo/2.jpg"/></div>
            <div class="splide__slide" data-slider-thumb="../assets/images/demo/3.jpg"><img src="../assets/images/demo/3.jpg"/></div>
            <div class="splide__slide" data-slider-thumb="../assets/images/demo/4.jpg"><img src="../assets/images/demo/4.jpg"/></div>
            <div class="splide__slide" data-slider-thumb="../assets/images/demo/5.jpg"><img src="../assets/images/demo/5.jpg"/></div>
        </div>
    </div>
</div>

data-thumbs-options #

В значениях указываются параметры для гибкой настройки миниатюр.
С ними можно ознакомиться на странице офиц.документации.

    <div class="js-slider" data-slider-thumbs="true" data-thumbs-options='{ "arrows": true, "breakpoints": { "480": {"arrows": false} } }'>
        <div class="splide__track">
            <div class="splide__list">
                <div class="splide__slide" data-slider-thumb="../assets/images/demo/1.jpg"><img src="../assets/images/demo/1.jpg"/></div>
                <div class="splide__slide" data-slider-thumb="../assets/images/demo/2.jpg"><img src="../assets/images/demo/2.jpg"/></div>
                <div class="splide__slide" data-slider-thumb="../assets/images/demo/3.jpg"><img src="../assets/images/demo/3.jpg"/></div>
                <div class="splide__slide" data-slider-thumb="../assets/images/demo/4.jpg"><img src="../assets/images/demo/4.jpg"/></div>
                <div class="splide__slide" data-slider-thumb="../assets/images/demo/5.jpg"><img src="../assets/images/demo/5.jpg"/></div>
            </div>
        </div>
    </div>

Прослушивание событий #

Прослушивания событий реализовано на базе Splide#on().

    BasicSlider.on('.my-slider', {
        event: 'active', // событие
        listener: () => {
            // слушатель события
        }
    });

Список событий, которые реализованы на данный момент.