swiper在react怎么引用?

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-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是自己加的,为了让按钮居中对齐


)
}

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是swiper在react怎么引用?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1