Comment utiliser le plug-in swiper dans React ?

Méthode : 1. Utilisez la commande "npm i swiper -S" pour installer le package swiper ; 2. Utilisez l'instruction import pour introduire les fichiers css et js de swiper ; 3. Écrivez la structure du composant swiper dans ; rendu et ajoutez-le dans React Créez simplement l'objet Swiper dans la fonction de cycle de vie de montage.

L'environnement d'exploitation de ce tutoriel : système Windows7, version React16 Cette méthode convient à toutes les marques d'ordinateurs.

Utiliser le swiper de base dans React

Étape 1 : Installer le package

npm i swiper -S

Étape 2 : Introduire le package

import Swiper from 'swiper/dist/js/swiper.js'  
import 'swiper/dist/css/swiper.css'

Étape 3 : Écrire du HTML

    <!-- Slider main container -->
    <p class="swiper-container">

        <!-- Additional required wrapper -->
        <p class="swiper-wrapper">

            <!-- Slides -->
            <p class="swiper-slide">Slide 1</p>
            <p class="swiper-slide">Slide 2</p>
            <p class="swiper-slide">Slide 3</p>
        </p>

        <!-- If we need pagination -->
        <p class="swiper-pagination"></p>

        <!-- If we need navigation buttons -->
        <p class="swiper-button-prev"></p>
        <p class="swiper-button-next"></p>

        <!-- If we need scrollbar -->
        <p class="swiper-scrollbar"></p>
    </p>

Étape 4 : Créer Swiper dans le cycle de déclaration de réaction L'objet est appelé

// 直接引用数据将，new Swiper放在componentDidMount
// 用axios请求数据，new Swiper放在componentDidUpdate  

    new Swiper('.swiper-container', {
        direction: 'vertical',//竖向轮播
        loop: true,//无缝轮播
        pagination: {//小圆点分页
            el: '.swiper-pagination',
        },
        navigation: {//左右分页
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {//下划线分页
            el: '.swiper-scrollbar',
        }
    })

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!