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

 
  
  
Slide 1
 
Slide 2
 
Slide 3
 
  
  
 
  
 

É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!