Create Beautiful Image Sliders with React Swiper: A step-by-step Guide
For Those who may not be familiar with, swiper JS is popular and powerful javaScript library for building responsive and touch-friendly sliders and carousels. it is widely used in web development and has a dedicated React Library called “react-id-swiper” That provides easy Integration with react Components.
In this example, we will create a beautiful and interactive image slider using Swiper JS and React. We will be using react-id-swiper library to build the slider. Our goal is to create a slider that displays a set of images with a unique design and interaction that sets it apart from standard image sliders.
- To get started, let’s first install the necessary packages by running the following command in our terminal:
npm install swiper react-id-swiperOnce the installation is complete, we can import the necessary components in our React file:
import React from "react";
import SwiperCore, { Autoplay, EffectCoverflow, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
// import "./App.css";
import "./Swiper.css";
SwiperCore.use([EffectCoverflow,Autoplay, Pagination]);Here, we are importing the necessary components from react-id-swiper and the Swiper CSS files. We are also importing the required SwiperCore components, including Navigation, Pagination, and EffectCoverflow.
- Next, let’s create our React component and define the Swiper options that we want to use:
OPTION — 1
Here, we have defined the Swiper options object, which includes various parameters that control the behavior and appearance of the slider. We have also defined an array of image URLs that we want to display in the slider.
Inside the component, we have used a map function to loop over the image array and create a SwiperSlide for each image. Each SwiperSlide contains a
// if you want to use array
const slide_img = [
"https://swiperjs.com/demos/images/nature-1.jpg",
"https://swiperjs.com/demos/images/nature-2.jpg",
"https://swiperjs.com/demos/images/nature-3.jpg",
"https://swiperjs.com/demos/images/nature-4.jpg",
"https://swiperjs.com/demos/images/nature-5.jpg",
"https://swiperjs.com/demos/images/nature-6.jpg",
"https://swiperjs.com/demos/images/nature-7.jpg",
"https://swiperjs.com/demos/images/nature-8.jpg",
"https://swiperjs.com/demos/images/nature-9.jpg",
];
const App1 = () => {
return (
<div className="main-swiper">
<Swiper
effect={"coverflow"}
autoplay={{
delay: 1500,
disableOnInteraction: false,
}}
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: false,
}}
pagination={true}
className="mySwiper"
>
{/* using Array */}
{slide_img.map((image, i) => {
return(
<SwiperSlide key={i}>
<img src={image} alt=""/>
</SwiperSlide>);
})}
</Swiper>
</div>
);
};
export default App1;There Is One More Way Of Doing it
OPTION — 2
const App1 = () => {
return (
<div className="main-swiper">
<Swiper
effect={"coverflow"}
autoplay={{
delay: 1500,
disableOnInteraction: false,
}}
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: false,
}}
pagination={true}
className="mySwiper">
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" alt="" />
</SwiperSlide>
</Swiper>
</div>
);
};
export default App1;Final Merge Code Will Look Like This Right Now i will Execute Array Method and Comment Out Other One You Can Try Both According To your Needs and Understanding.
App1.jsx
import React from "react";
import SwiperCore, { Autoplay, EffectCoverflow, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
// import "./App.css";
import "./Swiper.css";
SwiperCore.use([EffectCoverflow,Autoplay, Pagination]);
// if you want to use array
const slide_img = [
"https://swiperjs.com/demos/images/nature-1.jpg",
"https://swiperjs.com/demos/images/nature-2.jpg",
"https://swiperjs.com/demos/images/nature-3.jpg",
"https://swiperjs.com/demos/images/nature-4.jpg",
"https://swiperjs.com/demos/images/nature-5.jpg",
"https://swiperjs.com/demos/images/nature-6.jpg",
"https://swiperjs.com/demos/images/nature-7.jpg",
"https://swiperjs.com/demos/images/nature-8.jpg",
"https://swiperjs.com/demos/images/nature-9.jpg",
];
const App1 = () => {
return (
<div className="main-swiper">
<Swiper
effect={"coverflow"}
autoplay={{
delay: 1500,
disableOnInteraction: false,
}}
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: false,
}}
pagination={true}
className="mySwiper"
>
{/* using Array */}
{slide_img.map((image, i) => {
return(
<SwiperSlide key={i}>
<img src={image} alt=""/>
</SwiperSlide>);
})}
// Normal Method Commented From Here
{/* <SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" alt="" />
</SwiperSlide> */}
</Swiper>
</div>
);
};
export default App1;Swiper.css
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
}
If you enjoyed reading this blog, please share it with your friends and make sure to subscribe to our YouTube channel :- Jara diary — YouTube
for more exciting content. Help us spread the word about our expertise in MERN stack development, cloud computing, React Native, and Next.js:- on Telegram @nodereactand stay tuned for more informative articles to come. Together, we can take the tech world by storm!
Errormania — YouTube
