What is react swipe usage?

How to use react swipe: 1. Install swiper in the react project through "npm install swiper -s"; 2. Introduce "import React,{Component} from 'react'...".

The operating environment of this article: Windows7 system, react17.0.1, Dell G3.

What is the usage of swipe in react?

Using swiper in React

Although many ui frameworks have carousels Pictures are a revolving door, but sometimes our needs cannot be met by these.
Here I, a newbie, encountered a situation that required the picture and text list to be able to slide left and right. After searching for a long time, swiper was suitable for me.
Shown below Here’s my usage:

First, install swiper in the react project

npm install swiper -s

Then introduce it into the components that need to use swiper:

import React,{Component} from 'react'
import './new.css'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

class New extends Component{
    constructor(props){
        super(props);
        this.state={
            newlist:[0,1,2,3,4,5,6]
        }
    }
    componentDidMount() {
        new Swiper('.swiper-container', {
            slidesPerView: 3,
            centeredSlides: true,
            virtual: {
                slides:this.state.newlist,
            }
        })
    }
    render(){
        return(
            <p>
                </p><p>
                    </p><p>
                    </p>
                
                       
        )
    }
}

export default New;

The effect is like this:

You can slide left and right

Recommended learning: "react video tutorial"

The above is the detailed content of What is react swipe usage?. For more information, please follow other related articles on the PHP Chinese website!