Apakah penggunaan leret bertindak balas?

Cara menggunakan react swipe: 1. Pasang swiper dalam projek react melalui "npm install swiper -s"; 2. Perkenalkan "import React,{Component} from 'react'...".

Persekitaran pengendalian artikel ini: sistem Windows 7, react17.0.1, Dell G3.

Apakah kegunaan leret reaksi?

Swiper digunakan dalam React

Walaupun banyak rangka kerja ui mempunyai karusel Gambar adalah pintu pusingan, tetapi kadang-kadang keperluan kita tidak dapat dipenuhi oleh ini
Di sini, seorang pemula seperti saya menghadapi situasi di mana senarai gambar dan teks boleh digeser ke kiri dan ke kanan untuk saya.
Seperti yang ditunjukkan di bawah Inilah penggunaan saya:

Mula-mula, pasang swiper dalam projek react

npm install swiper -s

dan kemudian masukkan ke dalam komponen yang perlu menggunakan 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;

Kesannya seperti ini:

Anda boleh meluncur ke kiri dan kanan

Pembelajaran yang disyorkan: "bertindak balas tutorial video"

Atas ialah kandungan terperinci Apakah penggunaan leret bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!