How to use swipe in react

This article mainly introduces how to use swipe in react, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

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

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

Using swiper in React

Although there are a lot of ui frameworks with rowing pictures and walking lanterns, sometimes our needs cannot be met.

Here I, a rookie, encountered a situation where the list of pictures and text can be scanned left and right. I have been looking for it for a long time or whether swiper is suitable for me.

Here's how I use it:

First, install swiper in the react project

Npm install swiper-s

Then you need to use the components of swiper to introduce:

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:]} componentDidMount () {new Swiper ('.swiper-container', {slidesPerView: 3, centeredSlides: true, virtual: {slides:this.state.newlist,}})} render () {return (

)} export default New

The effect is as follows:

You can slide left and right.

Thank you for reading this article carefully. I hope the article "how to use swipe in react" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!