Swiper Element Guide for React
Introduction
Image sliders are essential UI components in modern web development. They provide an elegant way to display grouped content such as images, videos, or product listings in a compact, interactive format.
This guide demonstrates how to integrate Swiper Element, a Web Component-based API introduced in Swiper.js, into a React project. Unlike traditional React-based Swiper components, Swiper Element leverages native Web Components, offering a lightweight, flexible, and modern approach to implementing Image Sliders.
🧭 About This Article
1. What is Swiper.js?
Swiper.js is a powerful, modern library for creating touch-friendly sliders. Initially optimized for mobile, it now provides full support for desktops and includes features like gesture controls, keyboard navigation, autoplay, lazy loading, and more.
Swiper recommends using Swiper Element—a Web Component implementation that simplifies integration with frameworks like React, Vue, and Angular while ensuring better performance and cleaner code.
2. Installations
Begin by setting up your React app using Vite and installing Swiper:
npm create vite@latest swiper-demo --template react
cd swiper-demo
npm install swiper
npm run dev
3. How to Set Up Swiper
Using Node Modules
In your main.jsx, register the Swiper Element:
import { register } from 'swiper/element/bundle';
register();
Using CDN
Alternatively, include Swiper via CDN in your index.html:
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
4. Swiper Custom Elements
Here's the basic structure of a Swiper Element slider:
<swiper-container>
<swiper-slide>Slide1</swiper-slide>
<swiper-slide>Slide2</swiper-slide>
<swiper-slide>Slide3</swiper-slide>
</swiper-container>
Styling Example
swiper-container {
width: 800px;
height: 200px;
line-height: 200px;
text-align: center;
}
swiper-slide {
background-color: #333;
color: white;
font-size: 25px;
}
5. Swiper Parameters as Attributes
Swiper parameters can be passed as HTML attributes using kebab-case syntax:
<swiper-container
slides-per-view="3"
space-between="20"
scrollbar-clickable="true"
mousewheel-invert="true"
>
...slides
</swiper-container>
6. Responsive Breakpoints
To make sliders responsive, define breakpoints using a JSON string:
<swiper-container
breakpoints={JSON.stringify({
640: { slidesPerView: 1, spaceBetween: 20 },
768: { slidesPerView: 3, spaceBetween: 40 },
1024: { slidesPerView: 4, spaceBetween: 50 }
})}
>
...slides
</swiper-container>
7. Pagination and Navigation
Enable built-in pagination and navigation by setting attributes:
<swiper-container
slides-per-view="3"
pagination="true"
navigation="true"
>
...slides
</swiper-container>
8. Lazy Loading Images
Use the lazy attribute for improved performance with images:
<swiper-container lazy="true" navigation="true" pagination="true">
<swiper-slide lazy="true">
<img loading="lazy" src="..." alt="..." />
</swiper-slide>
</swiper-container>
Recommended by LinkedIn
9. Effects
Add transition effects such as cube, fade, or coverflow:
<swiper-container
effect="cube"
grab-cursor="true"
cube-effect-shadow="true"
cube-effect-slide-shadows="true"
cube-effect-shadow-offset="20"
cube-effect-shadow-scale="0.94"
>
...slides
</swiper-container>
10. Vertical Sliders
Change the slide direction using direction="vertical":
<swiper-container
direction="vertical"
navigation="true"
pagination="true"
>
...slides
</swiper-container>
11. Accessibility Features
Swiper Element supports accessibility enhancements like:
<swiper-container
slides-per-view="2"
keyboard="true"
aria-label="Featured image carousel"
>
...slides
</swiper-container>
12. Performance Optimization
For large datasets or media-heavy content:
<swiper-container virtual="true">
{data.map(item => (
<swiper-slide key={item.id}>{item.content}</swiper-slide>
))}
</swiper-container>
13. Swiper with Dynamic Content
When content updates after initial render, manually trigger a Swiper update:
const container = document.querySelector('swiper-container');
container.swiper.update();
14. Styling Swiper Elements
Inline CSS Variables
<swiper-container style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff"
}}>
...slides
</swiper-container>
External CSS Styles
swiper-container {
width: 800px;
height: 400px;
}
swiper-slide img {
object-fit: cover;
}
Targeting with Custom Classes
.image-slider swiper-slide {
border: 2px solid #ccc;
}
15. Building Custom Slider Elements
Add your own navigation buttons using element selectors:
<swiper-container
navigation-next-el=".custom-next-button"
navigation-prev-el=".custom-prev-button"
pagination-clickable="true"
autoplay-delay="2000"
>
...slides
</swiper-container>
<div className="custom-prev-button">⟨</div>
<div className="custom-next-button">⟩</div>
Custom Navigation Styles
.custom-prev-button, .custom-next-button {
position: absolute;
top: 50%;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
padding: 10px;
border-radius: 5px;
}
16. Summary
Swiper.js v11 with Swiper Element offers a modern, declarative, and highly customizable way to build sliders in React. With support for lazy loading, custom effects, breakpoints, ARIA accessibility, and virtual rendering, Swiper Element provides all the tools necessary to build performant and user-friendly carousels.
It seamlessly integrates into modern front-end workflows and is future-proof thanks to its Web Component foundation.
17.References
Written by: Tushar Kumar
Date: July 07, 2025