https://github.com/coderboy-raiyan/swiper-js-guidline
I have created this repo for beginners who have facing problems when they use swiper js with react.
https://github.com/coderboy-raiyan/swiper-js-guidline
reactjs swiper-js
Last synced: 8 months ago
JSON representation
I have created this repo for beginners who have facing problems when they use swiper js with react.
- Host: GitHub
- URL: https://github.com/coderboy-raiyan/swiper-js-guidline
- Owner: coderboy-raiyan
- Created: 2021-12-03T05:20:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-03T06:52:37.000Z (over 4 years ago)
- Last Synced: 2025-04-16T02:05:23.034Z (about 1 year ago)
- Topics: reactjs, swiper-js
- Language: JavaScript
- Homepage: https://swiper-raiyan-io.netlify.app/
- Size: 213 KB
- Stars: 16
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to use Swiper js for beginners with react js
## Demo
[Demo Page](https://swiper-raiyan-io.netlify.app/)
## Installation
With Yarn:
```bash
yarn add swiper@6.8.4
```
With npm:
```bash
npm install --save swiper@6.8.4
```
## Usage
```
Import these files :
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
```
### Example No - 1
```js
import React from "react";
import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
import "./App.css";
SwiperCore.use([EffectCoverflow, Pagination]);
const App = () => {
return (
);
};
export default App;
```
### Example No - 2
```js
import React from "react";
import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
import "./App.css";
SwiperCore.use([EffectCoverflow, 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 App = () => {
return (
// Using array
{slide_img.map((img, i) => {
return (
);
})}
);
};
export default App;
```
### Include CSS
```css
/* At last you have to copy these css styles from here ,Create a CSS file and paste it and import the file */
/* Also you can customize these css styles*/
/* In my case, I use these CSS styles in my App.css file*/
.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%;
}
```
## 🚀 Connect with me
[](https://www.facebook.com/tajkierhaque/)
[](https://www.instagram.com/tajkier_haque/)
[](https://www.linkedin.com/in/tajkier-haque/)
[](https://github.com/coderboy-raiyan)
[](mailto:tajkierhaque@gmail.com)