How to build a carousel image slider with swiper.js
Tags: javascript, webdev, react, nextjs
Published: 2022-02-08 01:53:52

In this blog, we will learn about swiper.js by building a simple carousel image slider app.

## Video Tutorial

I have made a video about this on my youtube channel.

{% youtube EJsmCDol9iA %}

Please like and subscribe to my channel. It motivates me to create more content like this.

## Demo 
{% codepen https://codepen.io/thatanjan/pen/jOayYjd %}

## Setup

```html
<head>
	<link
		rel="stylesheet"
		href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
	/>
</head>

<body>
	<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>
```

## Html Layout

```html
<div class="container">
	<!-- main swiper container -->
	<div class="swiper">

	<!-- wrapper for slide -->
		<div class="swiper-wrapper">

		<!-- single slide -->
			<div class="swiper-slide">
				<div class="image__wrapper">
					<img src="images/1.jpg" alt="" />
				</div>
			</div>

			<div class="swiper-slide">
				<div class="image__wrapper">
					<img src="images/2.jpg" alt="" />
				</div>
			</div>

			<div class="swiper-slide">
				<div class="image__wrapper">
					<img src="images/3.jpg" alt="" />
				</div>
			</div>

			<div class="swiper-slide">
				<div class="image__wrapper">
					<img src="images/4.jpg" alt="" />
				</div>
			</div>

			<div class="swiper-slide">
				<div class="image__wrapper">
					<img src="images/5.jpg" alt="" />
				</div>
			</div>

			<div class="swiper-slide">
				<div class="image__wrapper">
					<img src="images/6.jpg" alt="" />
				</div>
			</div>
		</div>

		<!-- pagination -->
		<div class="swiper-pagination"></div>

		<!-- navigation buttton -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</div>
```

```css
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	max-width: 100vw;
	overflow-x: hidden;
}

.container {
	background-color: #292929;
	display: grid;
	place-items: center;
	min-height: 100vh;
}

.swiper {
	width: 80%;
}

.image__wrapper {
	width: 100%;
	position: relative;
	padding-top: 56.25%;
}

.image__wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
```

Explanation: 
1. we have a main swiper container. Then a wrapper for all the slides.
2. All the images are responsive by maintaining a specific aspect ratio. If you want to learn how to do that, please watch the following video.
{% youtube YYxfwDWuPmc %}


```javascript
const swiper = new Swiper('.swiper', {
	loop: true, // creates a infinite loop of slides
	navigation: { // activate navigation with navigation buttons
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {// activate paginations
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
	},

	// keyboard and mousewheel navigation
	keyboard: true,
	mousewheel: true,

	// for other than sliding effect

	// effect: 'creative',
	// creativeEffect: {
	// 	prev: {
	// 		// will set `translateZ(-400px)` on previous slides
	// 		translate: [0, 0, -400],
	// 	},
	// 	next: {
	// 		// will set `translateX(100%)` on next slides
	// 		translate: ['100%', 0, 0],
	// 	},
	// },
	// effect: 'coverflow',
})
```

Explanation:
1. We need to create a new instance of `Swiper`. We can also pass options to customize. Please read more from the [docs](https://swiperjs.com/swiper-api)


That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.