Swiper JS

Swiper.js

is a Vanilla JS library that enables you to create touch sliders with hardware accelerated transitions. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Go To Documentation

Basic Swiper

Navigation between sliders is done by a simple swipe gesture.

Slide 1

Slide 2

Slide 3

Javascript Code for this Element

const defaultSwiper = new Swiper("#default-swiper", {});

HTML Code for this Element

<div class="swiper" id="default-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>

Swiper with Nav

Improve User experience by adding Navigation Controls

Slide 1

Slide 2

Slide 3

Javascript Code for this Element

var swiperNavs = new Swiper("#swiperWithNavs", {
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev",
	},
});

HTML Code for this Element

<div class="swiper" id="swiperWithNavs" style="height: 35vh;">
	<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-button-next">
		<i class="bi bi-chevron-right"></i>
	</div>
	<div class="swiper-button-prev">
		<i class="bi bi-chevron-left"></i>
	</div>
</div>

Pagination

Add pagination to the slides

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Javascript Code for this Element

var swiper = new Swiper("#swiperWithPagination", {
	pagination: {
		el: ".swiper-pagination",
		dynamicBullets: true,
	},
});

HTML Code for this Element

<div class="swiper swiper-demo" id="swiperWithPagination">
	<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 class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
		<div class="swiper-slide">Slide 6</div>
		<div class="swiper-slide">Slide 7</div>
		<div class="swiper-slide">Slide 8</div>
		<div class="swiper-slide">Slide 9</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-next">
		<i class="bi bi-chevron-right"></i>
	</div>
	<div class="swiper-button-prev">
		<i class="bi bi-chevron-left"></i>
	</div>
</div>

Vertical Swiper

Scroll upwards and downwards to navigate the slides.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Javascript Code for this Element

const verticalSwiper = new Swiper('#verticalSwiper', {
	// Optional parameters
	direction: 'vertical',
	loop: true,
	// Navigation arrows
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	//scrollbar
	scrollbar: {
		el: '.swiper-scrollbar',
	},
});

HTML Code for this Element

<div class="swiper swiper-demo" id="verticalSwiper">
	<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 class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
		<div class="swiper-slide">Slide 6</div>
		<div class="swiper-slide">Slide 7</div>
	</div>
	<div class="swiper-scrollbar"></div>
</div>