https://github.com/mkubdev/vite-swipper-debug
https://github.com/mkubdev/vite-swipper-debug
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mkubdev/vite-swipper-debug
- Owner: mkubdev
- Created: 2023-08-07T12:07:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-07T12:24:48.000Z (over 2 years ago)
- Last Synced: 2025-01-22T22:29:40.915Z (about 1 year ago)
- Language: JavaScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Steps
1. Create the project with [Vite](https://vitejs.dev/guide/)
```bash
npm create vite@latest vite-swip-react -- --template react
```
2. Add [swipper](https://swiperjs.com/react)
```bash
npm install swiper
```
3. Import demo from docs:
```js
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.css';
function App () {
return (
<>
console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
style={{ backgroundColor: 'red', height: '100vh' }}
>
Slide 1
Slide 2
Slide 3
Slide 4
>
)
}
export default App
```
## React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh