Используя JSSOR, пытаясь создать динамический массив изображений для вызова, не знаете, как начать

Question

Будучи программистом-новичком, я пытаюсь создать слайдер JSSOR для вызова из массива изображений внутри веб-страницы .aspx , Я знаком с JQuery, JavaScript, Bootstrap, HTML и всем остальным, что может быть актуальным, но я не понимаю, как это сделать.

Соответствующие части моего HTML документа:

asp:Content ID="Content3" ContentPlaceHolderID="PageBody" runat="server" onLoad ="initiliaze()"> 
<div style="height:500px; margin:0 auto; display:block;"> 
    <div align:"center" class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-24 col-lg-offset-5"> 
      <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px;"> 
       <div u="slides" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 1000px; height: 480px;"> 
        <div> <img u ="image" src='../Resources/Images/NewMEOBannerV3_1050x150.png'/></div> 
        <div><img u ="image" src ="</div> 
        <div> <img u="image" src="http://i.ytimg.com/vi/CINA288fZUs/maxresdefault.jpg" /> </div> 
        <div> <img u="image" src="http://edge.alluremedia.com.au/m/k/2015/06/arkham1.jpg" /> </div> 
        <div> <img u="image" src="http://i.ytimg.com/vi/VpXUIh7rlWI/maxresdefault.jpg" /> </div> 
       </div> 
       <div u="navigator" class="jssorb01" style="bottom: 0px; right: 0px;"> 
        <span u="arrowleft" class="jssora05l" style="top: -250px; left: -450px;"></span> 
        <span u="arrowright" class="jssora05r" style="top: -250px; right: -450px;"></span> 
        <div u="prototype"></div> 
       </div> 
       </div> 
       <div style="line-height:75%;"> 
        <br /> 
       </div> 
       <div class="ticker1"> 
        <div class="innerWrap"> 
         <div class="list"> This is content</div> 
         <div class="list"> This is also content </div> 
         <div class="list"> Still content here...</div> 
         <div class="list"> YES THIS IS CONTENT. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Я хочу, чтобы поместить изображения, которые находятся в скользящем DIV в массив, а затем вызвать массив позже, чтобы консолидировать все и сделать его легко для редактирования бэкэнда.

Answer 1

Чтобы динамический слайдер jssor динамически, вы можете динамически заполнять html-код, а затем инициализировать слайдер jssor после этого.

<script> 

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

     //define image array 
     var images = [ 
      "../img/landscape/01.jpg", 
      "../img/landscape/02.jpg", 
      "../img/landscape/03.jpg", 
      "../img/landscape/04.jpg", 
      "../img/landscape/05.jpg", 
      "../img/landscape/06.jpg", 
      "../img/landscape/07.jpg", 
      "../img/landscape/08.jpg" 
     ]; 

     //retrieve the 'slides' container element to fill slides. 
     var slidesElement = document.getElementById("slides"); 

     //fill images dynamically 
     for (var i = 0; i < images.length; i++) { 
      var slideElement = document.createElement("div"); 
      var imgElement = document.createElement("img"); 
      imgElement.setAttribute("u", "image"); 
      imgElement.src = images[i]; 
      slideElement.appendChild(imgElement); 
      slidesElement.appendChild(slideElement); 
     } 

     var options = {}; 

     var jssor_slider1 = new $JssorSlider$("slider1_container", options); 
    }); 
</script> 
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; 
    height: 300px;"> 
    <!-- Slides Container --> 
    <div id="slides" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;"> 
     <!-- dynamically fill slides here --> 
    </div> 
</div>