Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端；能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
swiper在react怎么引用？
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-<em style="color:transparent">来源[email protected]搞@^&代*@码网</em>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',
},
});
}
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是自己加的，为了让按钮居中对齐
)
}
更多react的相关知识，请查阅 搞代码网 ！！
以上就是swiper在react怎么引用？的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：swiper在react怎么引用？
转载请注明原文链接：swiper在react怎么引用？
