Slider | Basic UI

Вступление #

Для работы слайдера можно использовать класс 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 sliderOptions = {
	type: 'slide',
	trimSpace: 'move',
	rewind: false,
	waitForTransition: true,
	perPage: 3,
	perMove: 3,
	arrows: false,
}

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

// или

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="LazyCallbackDemo"
>
	<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>

<script>
	window.LazyCallbackDemo = function () {
		console.log('Сработала ленивая callback-функция "LazyCallbackDemo"');
	}
</script>

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

Для инициализации и настройки миниатюр необходимо использовать специальные 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)
		// слушатель события
	},
})