zoukankan      html  css  js  c++  java
  • Swiper动态获取数据后轮播图播放问题

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

    解决办法:

    由于图片数据是动态获取的,所以在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" alt=""></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} alt=""></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

    不积跬步无以至千里
  • 相关阅读:
    mysql官网下载yum
    zookeeper和kafka的leader和follower
    查看目标端口是否被占用
    scala中的val,var和lazy
    scala的异常处理try catch
    Navicat总是提示主键不存在问题
    idea常用快捷键
    wiremock技术入门
    Liunx常用操作(11)-VI编辑器-末行模式命令
    Liunx常用操作(十)-VI编辑器-命令模式命令
  • 原文地址:https://www.cnblogs.com/lyt0207/p/13037256.html
Copyright © 2011-2022 走看看