이미지 스 와이퍼에 동적 내용을 삽입하십시오.

Question

자바 스크립트에서 이미지 스 와이퍼를 사용하고 있습니다. 콘텐츠를 동적으로로드하기 위해 아약스 요청을 통해 이미지 스킵을 시도하고 있습니다.

이

은 잘 작동, 내 스크립트입니다 https://jsfiddle.net/ywn1w7fn/2/

을하지만 아약스 요청을 통해 그것을 채울하려고하면 제대로 동작하지 않습니다 :

이

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

아약스 성공 함수에서 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") 
     } 
    }); 

이 기능이 도움이 될 것입니다.