码迷,mamicode.com
首页 > 其他好文 > 详细

Swiper动态获取数据后轮播图播放问题

时间:2020-06-05 14:54:29      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:display   i++   medium   rac   ++   containe   data   ati   last   

循环轮播的时候,刚进入界面还是从第一张图片开始,循环一圈的时候就从第二个开始了,第一就是一闪就过了。 找了好久东拼西凑才解决

解决办法:

由于图片数据是动态获取的,所以在ajax请求成功后再初始化轮播图

function policybannerlistcb (data) {
  data = JSON.parse(data)
  console.log(data)
  if(data.result == 0) {
    if(data.policybanlist.length == 0){
      let div = ‘‘
      div += `
        <div class="swiper-slide"><img src="images/defaultBackground.png" ></div>
        `
        
        $(‘.swiper-wrapper‘).append(div)
    }else {
      let div = ‘‘
      for(let i =0; i < data.policybanlist.length; i++) {
        let policybanlistitem = data.policybanlist[i]
        div += `
        <div class="swiper-slide" onClick="clickswiperimg(${policybanlistitem.policy_id})"><img src=${policybanlistitem.policy_bannerpic} ></div>
        `
      }
      $(‘.swiper-wrapper‘).append(div)
      $(‘.swiper-button-prev‘).css(‘display‘,‘inline-block‘)
      $(‘.swiper-button-next‘).css(‘display‘,‘inline-block‘)
      //初始化swiper
    // 轮播图
    mySwiper = new Swiper(‘.swiper-container‘, {
      // 滚动方向 horizontal/vertical
      direction: ‘horizontal‘,
      // 自动播放
    autoplay: {
      delay: 4000,
      stopOnLastSlide: false,
      disableOnInteraction: false, //在手动切换之后恢复到自动播放
    },
    onSlideChangeEnd: function(swiper){ 
           swiper.update();  
           mySwiper.startAutoplay();
            mySwiper.reLoop();  
          },
    
      slidesPerView: 1,
      spaceBetween: 30,
      // 是否循环播放
      loop: true,
      loopAdditionalSlides : 3, //不设置这个可能会出现播放错乱的问题
      // 如果需要分页器(小圆点)
      // 是否需要分页器

      // pagination: {
      //     el: ‘.swiper-pagination‘,
      //     paginationClickable: true,
      // },
      // 点击分页器是否切换到对应的图片 是 true 否 false


      // 如果需要前进后退按钮
      navigation: {
          nextEl: ‘.swiper-button-next‘,
          prevEl: ‘.swiper-button-prev‘,
      },

      // 用户操作swiper之后,是否禁止autoplay。默认为true:停止。
      // 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
      // 操作包括触碰,拖动,点击pagination等。
      autoplayDisableOnInteraction: false,
      observer: true, //修改swiper自己或子元素时,自动初始化swiper
      observeParents: true //修改swiper的父元素时,自动初始化swiper

    })
    }
  }  

}
比较重要的部分我用红色字体标出了。

参考连接:

https://blog.csdn.net/weixin_43294560/article/details/103767977

https://blog.csdn.net/weixin_44384778/article/details/95998463?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-9

Swiper动态获取数据后轮播图播放问题

标签:display   i++   medium   rac   ++   containe   data   ati   last   

原文地址:https://www.cnblogs.com/lyt0207/p/13037256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!