v 0.9.8

Вступление #

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