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