Home > AI > Frontend > Swiper >

How to run a simple example

Swiper shark 2 min read

This tutorial tells you how to run a Swiper project as quickly as quick 1 minute.

Open the terminal and enter these commands:

1
2
3
4
5
6
7
8
9
10
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.

1
2
3
4
5
"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.

1
2
3
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>

1
2
3
4
5
6
7
8
9
10
11
12
<!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,

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 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

1
npm start

Problem lists:

ProblemSolution
HOST environmentrun unset HOST on the terminal
webpack version conflictcheck if react-scripts is installed
node-sass version conflictreinstall nodejs
Share this post:
Related posts:

Leave a Reply