Jssor 슬라이더 전환이 작동하지 않습니다.

Question

Jssor 슬라이더를 사용하고 있습니다. 내 웹 메서드가 2 개의 이미지 URL을 반환합니다. & Ajax 성공 함수가 올바르게 작동합니다. 전환이 작동하지 않습니다. & 첫 번째 이미지 만 표시됩니다. HTML을 & CSS는 일부

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"> 

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;"> 
    <div id="HomeImgSliders"> </div> 

    <%-- <div><img u="image" src="http://jssor.com/img/photography/003.jpg" /></div>--> 

</div> 

<!-- Arrow Navigator Skin Begin --> 
<style> 
    /* jssor slider arrow navigator skin 03 css */ 
    /* 
     .jssora03l    (normal) 
     .jssora03r    (normal) 
     .jssora03l:hover  (normal mouseover) 
     .jssora03r:hover  (normal mouseover) 
     .jssora03ldn   (mousedown) 
     .jssora03rdn   (mousedown) 
     */ 
    .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn { 
     position: absolute; 
     cursor: pointer; 
     display: block; 
     background: url(http://jssor.com/img/a17.png) no-repeat; 
     overflow: hidden; 
    } 

    .jssora03l { 
     background-position: -3px -33px; 
    } 

    .jssora03r { 
     background-position: -63px -33px; 
    } 

    .jssora03l:hover { 
     background-position: -123px -33px; 
    } 

    .jssora03r:hover { 
     background-position: -183px -33px; 
    } 

    .jssora03ldn { 
     background-position: -243px -33px; 
    } 

    .jssora03rdn { 
     background-position: -303px -33px; 
    } 
</style> 
<!-- Arrow Left --> 
<span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;"></span> 
<!-- Arrow Right --> 
<span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px"></span> 
<!-- Arrow Navigator Skin End --> 
<a style="display: none" href="http://www.jssor.com">jQuery Slider</a> 

다음

내 jQuery를 & JSON/아약스 전화 파트

<script> 
$(function() { 
    LoadHomeImageSliders(); 
}); 

jQuery(document).ready(function ($) { 

    var options = { 
     $DragOrientation: 3,        //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) 
     $AutoPlay: true, 
     $ArrowNavigatorOptions: {      //[Optional] Options to specify and enable arrow navigator or not 
      $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
      $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
      $AutoCenter: 0,         //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
      $Steps: 1,         //[Optional] Steps to go for each navigation request, default value is 1 
      $AutoPlay: true 
     } 


    }; 

    var jssor_slider1 = new $JssorSlider$("slider1_container", options); 
}); 


function LoadHomeImageSliders() { 
    debugger; 
    var url = '<%= ResolveUrl("~/WebMethods.aspx/GetHomeImageSliders") %>'; 

      $.ajax({ 
       url: url, 
       type: "POST", 
       dataType: "json", 
       contentType: "application/json; charset=utf-8", 
       success: function (Result) { 
        $.each(Result.d, function (key, value) { 

         var html = "<img u=image src=" + value.ImagePath + "/>";//<-- Image Path/paths comes here Correctly 

         $("#HomeImgSliders").append(html); 

        }); 


       }, 


       error: function (e, x) { 
        alert(x.ResponseText); 
       } 
      }); 
     } 

Answer 1

전에 jssor 슬라이더를 초기화, 당신이 얻을 것 슬라이드 HTML을 잘 인구입니다 .

참조 : Jssor - how to add slides dynamically?

<script> 

    jQuery(document).ready(function ($) { 
     LoadHomeImageSliders(); 
    }); 


    function LoadHomeImageSliders() { 
     debugger; 
     var url = '<%= ResolveUrl("~/WebMethods.aspx/GetHomeImageSliders") %>'; 

     $.ajax({ 
      url: url, 
      type: "POST", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      success: function (Result) { 
       $.each(Result.d, function (key, value) { 

        var html = "<img u=image src=" + value.ImagePath + "/>";//<-- Image Path/paths comes here Correctly 

        $("#HomeImgSliders").append(html); 

       }); 


       var options = { 
        $DragOrientation: 3,        //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) 
        $AutoPlay: true, 
        $ArrowNavigatorOptions: {      //[Optional] Options to specify and enable arrow navigator or not 
         $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
         $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
         $AutoCenter: 0,         //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
         $Steps: 1,         //[Optional] Steps to go for each navigation request, default value is 1 
         $AutoPlay: true 
        } 


       }; 

       var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

      }, 


      error: function (e, x) { 
       alert(x.ResponseText); 
      } 
     }); 
    } 
</script>