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.
Please like and subscribe to my channel. It motivates me to create more content like this.
Demo
Setup
<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
<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>
* {
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:
- we have a main swiper container. Then a wrapper for all the slides.
- 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.
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:
- We need to create a new instance of
Swiper. We can also pass options to customize. Please read more from the docs
That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.
Top comments (0)