关于swiperJs自动播报控件自动循环后，不能点击的上一个组件的bu

起因：

项目中使用到Swiper,循环滚动， 使用 “循环 loop”参数后， 发现上一个元素无法点击点击。

使用中发现他会在首部和尾部。自动创建两个元素，并且导致该元素的onClick事件会失效,如下图红色框部分：

解决方式：

使用 class 获取点击事件，并且进行操作

    $(".swiper-slide").click(function(e) {
      alert("点击中了！");
    });  

swiper代码：

<div className="swiper-container main_meeting">
            <div className="swiper-wrapper">
              <div className="swiper-slide">Slide 1</div>
              <div className="swiper-slide">Slide 2</div>
              <div className="swiper-slide">Slide 3</div>
              <div className="swiper-slide">Slide 4</div>
            </div>
         </div>

    meetingSwiper = new Swiper('.main_meeting',{
      autoplay: 3000,//可选选项，自动滑动
      speed: 400,loop: true,//可选选项，开启循环
      // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
      autoplayDisableOnInteraction: false,// spaceBetween: 30,// 拖动释放时不会输出信息
      preventLinksPropagation: true,// 默认为true时，仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了。
      uniqueNavElements: false,})

swiper官网：

http://www.swiper.com.cn/

demo 地址：

https://codepen.io/CandyQiu/pen/LzXmeo?editors=0010

云栖助手项目中，需要自动滚动的，并且点击跳转到具体议程的页面。

云栖助手地址（手机体验）：https://idst.alibaba.com/yunqi/index.html#/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!