Maison >interface Web >js tutoriel >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> <!-- Additional required wrapper --> </p><p> <!-- Slides --> </p><p>Slide 1</p> <p>Slide 2</p> <p>Slide 3</p> <!-- If we need pagination --> <p></p> <!-- If we need navigation buttons --> <p></p> <p></p> <!-- If we need 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!