v 0.9.7

Вступление #

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

Слайдер реализован на базе splide.js.

Установка #

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

    <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>

	// настройки Splide.js(https://splidejs.com/guides/options/#options)
	const options = {
		type: 'slide',
		trimSpace: 'move',
		rewind: false,
		waitForTransition: true,
		perPage: 3,
		perMove: 3,
		arrows: false,
	};

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

    // или

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

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

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

data-slider-options #

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

<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-classes #

Отдельный data-атрибут для настройки классов элементов слайдера.

Принимает следующие значения:

Название Описание
arrows родительский контейнер стрелок
arrow триггеры стрелок
prev стрелка "Назад"
next стрелка "Вперёд"
pagination родительский контейнер пагинации
page триггеры пагинации 
    <div
		class="js-slider"
		data-slider-classes='{
			"arrows": "my-slider-arrows",
			"arrow": "my-slider-arrow",
			"prev": "my-slider-arrow--prev",
			"next": "my-slider-arrow--next",
			"pagination": "my-slider-pagination",
			"page": "my-slider-page"
		}'
	>
        <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-padding #

Отдельный data-атрибут для настройки внутренних отступов.

Принимает следующие значения:

Название Описание
top padding-top
right padding-right
bottom padding-bottom
left padding-left 
    <div
		class="js-slider"
		data-slider-padding='{
			"top": "0px",
			"right": "50px",
			"bottom": "0px"
			"left": "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-breakpoints #

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

    <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 #

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

    <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>

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

	const mySlider = document.querySelector(".my-slider");

	console.log(mySlider.BasicSlider); // пример экземпляра

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

Прослушивания событий реализовано на базе Splide#on(), с ними можно ознакомиться тут: список событий.

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