在图像swiper中插入动态内容

Question

我在javascript中使用图像swiper，并且我试图通过ajax请求对它进行puppet以动态加载内容。

这是我的脚本，做工精细：https://jsfiddle.net/ywn1w7fn/2/

但如果我尝试通过Ajax请求来填充它，它不工作：

var output = $('#swippy'); 
$.ajax({ 
     url: 'http://mywebsite.com/images/images_to_swiper.php', 
     dataType: 'jsonp', 
     jsonp: 'jsoncallback', 
     timeout: 5000, 
     success: function(data, status){ 
      $.each(data, function(i,item){ 
       var landmark = '<div class="swiper-slide"><img src="http://mywebsite.com//images/'+item.img+'" style="width:100%;"></img></div>';   
       output.append(landmark); 

      }); 

     }, 
     error: function(){ 
      $("#popupDialog").popup("open") 
     } 
    }); 

我的PHP页面返回JSON编码字符串，像这样：

([{"id":"19","img":"image1.png","posizione":"1"},{"id":"11","img":"anotherimage.jpg","posizione":"6"}]); 

我的代码有什么问题？

Answer 1

尽管您想在ajax成功函数中初始化swiper，但代码中似乎没有任何错误。

Your code should look like this 

var output = $('#swippy'); 
$.ajax({ 
     url: 'http://mywebsite.com/images/images_to_swiper.php', 
     dataType: 'jsonp', 
     jsonp: 'jsoncallback', 
     timeout: 5000, 
     success: function(data, status){ 
      $.each(data, function(i,item){ 
       var landmark = '<div class="swiper-slide"><img src="http://mywebsite.com//images/'+item.img+'" style="width:100%;"></img></div>';   
       output.append(landmark); 

      }); 

      var swiper = new Swiper('.swiper-container', 
      { 
       pagination: '.swiper-pagination', 
       paginationClickable: true, 
       autoplay: 2500, 
       autoplayDisableOnInteraction: true, 
       preloadImages: false 
      }); 
     }, 
     error: function(){ 
      $("#popupDialog").popup("open") 
     } 
    }); 

希望这会为你喝彩工作！