React中如何引用swiper插件_react swiper@10.1.0 引入

作者：知新_RL | 2024-02-23 05:20:07

踩

react swiper@10.1.0 引入

1、安装
npm install swiper

2、引入js和css
// 引入此路径，才不会打包失败
import Swiper from ‘swiper/dist/js/swiper.js’
import ‘swiper/dist/css/swiper.min.css’
3、在组件挂载完毕的时候生成 Swiper 对象

	componentDidMount(){
    new Swiper('.swiper-container', {
        loop: true,     //循环
        autoplay:{      //自动播放，注意：直接给autoplay:true的话，在点击之后不能再自动播放了
            delay: 2500,
            disableOnInteraction: false,    //户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,    // 允许点击跳转
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4、render周期中渲染DOM元素
render() {
const bannerImg = this.props.bannerImg;
return (

{bannerImg.map((item,index)=>(
<div key={index} className=“swiper-slide” style={{backgroundImage: url(${item})}}>

))}

// swiper-button-warp是自己加的，为了让按钮居中对齐

)
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/133961