Главная / JavaScript / Плагины / Swiper / Подключение и запуск

Подключение и запуск

Самый простой пример подключения

htmljscssРезультат

Скопировано

<link rel='stylesheet' href='//unpkg.com/swiper@7/swiper-bundle.min.css' />
<script src='//unpkg.com/swiper@7/swiper-bundle.min.js'></script>

<div class='swiper'>
	<div class='swiper-wrapper'>
		<div class='swiper-slide'>Слайд 1</div>
		<div class='swiper-slide'>Слайд 2</div>
		<div class='swiper-slide'>Слайд 3</div>
	</div>
	<div class='swiper-button-prev'></div>
	<div class='swiper-button-next'></div>
</div>

Показать код

Скопировано

new Swiper( '.swiper', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});

Показать код

Скопировано

.swiper {
	height: 300px;
}
.swiper-slide {
	text-align: center;
	font-size: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

Показать код

В HTML подключаем скрипты и стили слайдера с CDN и затем идет минимальный код разметки слайдера.

В CSS код исключительно для красоты, на работу слайдера он не влияет.

Чуть подробнее под подключение

HTML каркас для создания слайдера:

Скопировано

<!-- Основной контейнер слайдера -->
<div class='swiper'>
	<!-- Дополнительная обязательная обертка -->
	<div class='swiper-wrapper'>
		<!-- Слайды -->
		<div class='swiper-slide'>Slide 1</div>
		<div class='swiper-slide'>Slide 2</div>
		<div class='swiper-slide'>Slide 3</div>
		<!-- и т.д. -->
	</div>
	<!-- Если нужна пагинация -->
	<div class='swiper-pagination'></div>

	<!-- Если нужны стрелки влево / вправо -->
	<div class='swiper-button-prev'></div>
	<div class='swiper-button-next'></div>

	<!-- Если нужен скроллбар -->
	<div class='swiper-scrollbar'></div>
</div>

Показать код

Стилями можно задать высоту слайдера:

Скопировано

.swiper-container {

	height: 300px;

}

Показать код

JS для запуска слайдера:

Скопировано

new Swiper( '.swiper', {
	// Необязательные параметры
	direction: 'vertical',
	loop: true,

	// Если нужна пагинация
	pagination: {
		el: '.swiper-pagination',
	},

	// Если нужны стрелки влево / вправо
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},

	// Если нужен скроллбар
	scrollbar: {
		el: '.swiper-scrollbar',
	}
});

Показать код