Finding a non-boring carousel can sometimes be a challenge. Here, we'll introduce you to a fancy carousel with swiper library that you can integrate into your ReactJs application.
Understanding the Code
We will break down the code step-by-step to guide you through the creation process.
1. Install Swiper
The first step involves installing the sweeper library using npm or yarn:
npm i swiper
2. Import component and styles
Here, we import necessary components and styles from the swiper/react library and its CSS modules:
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";
3. Create Sweeper Component
This section defines SwiperComponent which holds the configuration and content for the carousel:
// SwiperComponent.jsx
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";
import "./styles.css";
import {
Autoplay,
EffectCoverflow,
Pagination,
Navigation,
} from "swiper/modules";
const SwiperComponent = () => {
return (
<Swiper
effect={"coverflow"}
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
loop={true}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
}}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, EffectCoverflow, Pagination, Navigation]}
className="mySwiper">
<SwiperSlide>
<img src="https://via.placeholder.com/300" alt="slide 1" />
</SwiperSlide>
<SwiperSlide>
<img src="https://via.placeholder.com/300" alt="slide 2" />
</SwiperSlide>
<SwiperSlide>
<img src="https://via.placeholder.com/300" alt="slide 3" />
</SwiperSlide>
<SwiperSlide>
<img src="https://via.placeholder.com/300" alt="slide 4" />
</SwiperSlide>
<SwiperSlide>
<img src="https://via.placeholder.com/300" alt="slide 5" />
</SwiperSlide>
</Swiper>
);
};
export default SwiperComponent;
4. Add style.css
This section defines custom CSS styles for the carousel. You can customize the appearance to match your application's design:
#app {
height: 100%
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
border-radius: 13px;
}
.mySwiper .swiper-slide-active img {
border: 10px solid #E4E4E4;
position: relative;
right: 10px;
}
.swiper-button-prev,
.swiper-button-next {
color: #333;
background-color: rgba(255, 255, 255, 0.5);
padding: 10px;
height: 50px;
width: 50px;
border-radius: 50%;
box-shadow: 2px 2px 5px #c8c8c8;
}
.mySwiper .swiper-button-prev {
left: 50%;
transform: translate(-150px);
}
.mySwiper .swiper-button-next {
right: 50%;
transform: translate(150px);
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 20px;
}
/* md screen */
@media (min-width: 768px) {
.swiper-button-prev {
transform: translate(-200px);
}
.swiper-button-next {
transform: translate(200px);
}
}
5. Use the Sweeper component in your App
Finally, we integrate the SwiperComponent into your main React application component (usually App.jsx):
// App.jsx
import React from 'react';
import SwiperComponent from './SwiperComponent';
const App = () => {
return (
<div className="App">
<h1>React Swiper with Coverflow Effect</h1>
<SwiperComponent />
</div>
);
};
export default App;
Conclusion
By following these steps, you'll be able to create a visually appealing and interactive carousel with a coverflow effect in your ReactJs application. Remember to replace the placeholder images with your desired content and customize style further to match your application's design.
This article was created with the assistance of Gemini and ChatGPT.
Top comments (0)