Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to design mobile touch slider using Swiper.js Plugin?
The Swiper.js plugin is a powerful JavaScript library for creating mobile-friendly touch sliders with smooth animations and intuitive navigation. It provides extensive customization options, making it ideal for building responsive image carousels, content sliders, and interactive galleries that work seamlessly across all devices.
Syntax
Following is the basic HTML structure for implementing Swiper.js
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide content</div>
<div class="swiper-slide">Slide content</div>
</div>
</div>
Following is the JavaScript initialization syntax
const swiper = new Swiper('.swiper', {
// configuration options
});
Basic Setup
To implement Swiper.js in your project, you need to include the CSS and JavaScript files, create the HTML structure, and initialize the slider with JavaScript. The basic setup requires a container element with the class swiper, a wrapper with class swiper-wrapper, and individual slides with class swiper-slide.
Example Simple Image Slider
Following example demonstrates a basic mobile touch slider with images
<!DOCTYPE html>
<html>
<head>
<title>Basic Swiper.js Touch Slider</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@11/swiper-bundle.min.css" />
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.swiper { width: 100%; max-width: 600px; height: 300px; margin: 0 auto; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
</style>
</head>
<body>
<h2>Mobile Touch Slider with Swiper.js</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/600/300?random=1" alt="Slide 1"></div>
<div class="swiper-slide"><img src="https://picsum.photos/600/300?random=2" alt="Slide 2"></div>
<div class="swiper-slide"><img src="https://picsum.photos/600/300?random=3" alt="Slide 3"></div>
</div>
</div>
<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: 3000,
},
});
</script>
</body>
</html>
This creates a basic touch slider that automatically cycles through images every 3 seconds and allows users to swipe between slides on mobile devices.
Adding Navigation and Pagination
Swiper.js provides built-in navigation arrows and pagination dots to enhance user interaction. These controls are especially useful for desktop users and provide visual feedback about the current slide position.
Example Slider with Navigation Controls
<!DOCTYPE html>
<html>
<head>
<title>Swiper.js with Navigation</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@11/swiper-bundle.min.css" />
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.swiper { width: 100%; max-width: 600px; height: 300px; margin: 0 auto; }
.swiper-slide { display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: white; font-size: 24px; }
</style>
</head>
<body>
<h2>Touch Slider with Navigation Controls</h2>
<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 class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>
This example includes navigation arrows and pagination dots that users can click to navigate between slides. The pagination dots also indicate the current active slide.
Advanced Configuration Options
Swiper.js offers numerous configuration options to customize the slider behavior, including multiple slides per view, spacing between slides, responsive breakpoints, and various effects.
Example Multi-slide Responsive Slider
<!DOCTYPE html>
<html>
<head>
<title>Advanced Swiper.js Configuration</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@11/swiper-bundle.min.css" />
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.swiper { width: 100%; max-width: 800px; margin: 0 auto; }
.swiper-slide { background: #f1f1f1; border-radius: 8px; padding: 30px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<h2>Responsive Multi-slide Touch Slider</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><h3>Card 1</h3><p>Content for first card</p></div>
<div class="swiper-slide"><h3>Card 2</h3><p>Content for second card</p></div>
<div class="swiper-slide"><h3>Card 3</h3><p>Content for third card</p></div>
<div class="swiper-slide"><h3>Card 4</h3><p>Content for fourth card</p></div>
<div class="swiper-slide"><h3>Card 5</h3><p>Content for fifth card</p></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
</script>
</body>
</html>
This configuration shows 1 slide on mobile devices, 2 slides on tablets (640px+), and 3 slides on desktop (768px+). The spaceBetween property adds spacing between slides.
Key Configuration Options
Following are the most commonly used Swiper.js configuration options
| Option | Description | Example Value |
|---|---|---|
slidesPerView |
Number of slides visible at once |
3 or 'auto'
|
spaceBetween |
Space between slides in pixels | 30 |
loop |
Enable continuous loop mode | true |
autoplay |
Auto-advance slides configuration | { delay: 3000 } |
navigation |
Enable navigation arrows | { nextEl: '.swiper-button-next' } |
pagination |
Enable pagination dots | { el: '.swiper-pagination', clickable: true } |
breakpoints |
Responsive settings for different screen sizes | { 768: { slidesPerView: 2 } } |
678 Views
