This tutorial tells you how to run a Swiper project as quickly as quick 1 minute.
Open the terminal and enter these commands:
mkdir my-app
cd my-app
npm init
npm i react -s
npm i react-dom -s
npm i react-scripts -s
npm i swiper -s
npm i @material-ui/core -s
npm i @material-ui/icons -s
npm i node-sass -s
Then modify the package.json to support npm start command.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "echo \"Error: no test specified\" && exit 1"
},
Then create public and src directories.
And create index.html in the public and index.js and TestAuto.js in the src directory.
pubilc/index.html
src/index.js
src/App.js
For the index.html, use Visual Studio to open it and just type <div id="root"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
For the index.js,
import React from 'react';
import ReactDOM from 'react-dom';
import App from './TestAuto';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
For the TestAudio.js
// https://swiperjs.com/get-started/
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import { makeStyles } from '@material-ui/core/styles';
import SwiperCore, { Autoplay } from 'swiper';
SwiperCore.use([Autoplay]);
const useStyles = makeStyles({
SwiperStyle: {
backgroundColor: '#f5f5f5',
height: '58px',
width: '100%',
},
});
export default function App(props) {
const classes = useStyles();
return (
<div>
<Swiper
direction={'horizontal'}
loop={true}
autoplay={{
delay: 500,
disableOnInteraction: false
}}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
<style jsx global>{`
.swiper-container {
background-color: #f5f5f5;
}
`}</style>
</div>
)
}
Finally, in the position of my-app, run this command on the terminal
npm start
Problem lists:
| Problem | Solution |
|---|---|
| HOST environment | run unset HOST on the terminal |
| webpack version conflict | check if react-scripts is installed |
| node-sass version conflict | reinstall nodejs |