How to Create a Fancy Carousel in ReactJs
Tags: webdev, react, carousel, ui
Published: 2024-05-18 17:03:45

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._