1、數據加載后進行swiper初始化時

$('.honor .commemorative-medals').on('click', 'li img', function () {var obj = $(this).closest('.commemorative-medals').attr('id');var i = $(this).closest('li').index();var str = '';var lunbo = "";var lunb0 = "";var temp = "";var temp2 = "";//標題輪播if(data[obj][i].inner_title_list && data[obj][i].inner_title_list.length){for(var k = 0; k<data[obj][i].inner_title_list.length; k++){temp2 += '<div class="swiper-slide">'+'<div class="text">'+'<p>'+data[obj][i].name +'</p>'+'<p class="tip">'+data[obj][i].inner_title_list[k] +'</p>'+'</div>'+'</div>'}lunb0 ='<div class="swiper-container-honor only-honor-swiper">'+'<img class="honer-later-pic" src="' + data[obj][i].pic_b + '" alt="' + data[obj][i].name + '" title="' + data[obj][i].name + '" class="honor-swiper-img" />'+'<div class="swiper-wrapper">'+temp2+'</div>'+'<div class="swiper-button-next honor-title-swiper-next"></div>'+'<div class="swiper-button-prev honor-title-swiper-prev"></div>'+'</div>'}else {//內容輪播for(var j = 0; j< data[obj][i].inner_pic.length; j++){temp += '<div class="swiper-slide">\<img src="' + data[obj][i].inner_pic[j] + '" alt="' + data[obj][i].name + '" title="' + data[obj][i].name + '" class="honor-lunbo-pic" />\</div>'}lunb0 = '<div class="swiper-container-honor">'+'<div class="swiper-wrapper">'+temp+'</div>'+'<div class="text">'+'<p>'+ data[obj][i].name +'</p>'+'<p class="tip">'+ data[obj][i].tip + '</p>'+'</div>'+'<div class="swiper-button-next honor-conten-swiper"></div>'+'<div class="swiper-button-prev honor-conten-swiper"></div>'+'</div>'}$('.prompt2 .main_content').html(lunb0);//數據加載完成后，開始用swipervar myswiper = new Swiper('.swiper-container-honor', {lazyLoading : true,spaceBetween: 0,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},onSlideChangeEnd: function (swiper) {swiper.update();mySwiper.startAutoplay();mySwiper.reLoop();}});

數據加載完成后，開始用swiper，會發現，swiper初始化后，左右切換不了

2.解決辦法

只需要修改一下swiper的配置即可，添加

var myswiper = new Swiper('.swiper-container-honor', {lazyLoading : true,observer:true,//修改swiper自己或子元素時，自動初始化swiper observeParents:true,//修改swiper的父元素時，自動初始化swiper spaceBetween: 0,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},onSlideChangeEnd: function (swiper) {swiper.update();mySwiper.startAutoplay();mySwiper.reLoop();}});

修改后查看效果

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的swiper动态加载数据左右切换失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。