2015-11-25 3 views
0

как добавить Carousel изображение с помощью jssor динамически Мой код: меню слайд ...как добавить Carousel изображение с помощью jssor динамически

<div id="slider1_container"> 
        <!-- Loading Screen --> 
        <div u="loading" style="position: absolute; top: 0px; left: 0px;"> 
         <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; 
            background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;"> 
         </div> 
         <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; 
            top: 0px; left: 0px;width: 100%;height:100%;"> 
         </div> 
        </div> 

        <!-- Slides Container --> 
        <div u="slides" class="slider1_container"> 
         <div><img u="image" src="image/house_5.jpg" /></div> 
         <div><img u="image" src="image/house_4.jpg" /></div> 
         <div><img u="image" src="image/house_3.jpg" /></div> 
         <div><img u="image" src="image/house_2.jpg" /></div> 
         <div><img u="image" src="image/house_1.jpg" /></div> 
        </div> 

        <span u="arrowleft" class="jssora03l"> 
        </span> 
        <span u="arrowright" class="jssora03r"> 
        </span> 

        <script> 
         jssor_slider1_starter('slider1_container'); 
        </script> 
       </div> 

слайд ...

<div id="slider2_container"> 
        <!-- Loading Screen --> 
        <div u="loading" style="position: absolute; top: 0px; left: 0px;"> 
         <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; 
          background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"> 
         </div> 
         <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; 
          top: 0px; left: 0px;width: 100%;height:100%;"> 
         </div> 
        </div> 

        <!-- Slides Container --> 
        <div u="slides" class="slider2_container"> 
         <div> 
          <img u="image" src="image/house_11.jpg" /> 
          <img u="thumb" src="image/house_11_abb.jpg" /> 
         </div> 
         <div> 
          <img u="image" src="image/house_11.jpg" /> 
          <img u="thumb" src="image/house_11_abb.jpg" /> 
         </div> 
         <div> 
          <img u="image" src="image/house_11.jpg" /> 
          <img u="thumb" src="image/house_11_abb.jpg" /> 
         </div> 
         <div> 
          <img u="image" src="image/house_11.jpg" /> 
          <img u="thumb" src="image/house_11_abb.jpg" /> 
         </div> 
         <div> 
          <img u="image" src="image/house_11.jpg" /> 
          <img u="thumb" src="image/house_11_abb.jpg" /> 
         </div> 
        </div> 

        <span u="arrowleft" class="jssora02l"> 
        </span> 
        <span u="arrowright" class="jssora02r"> 
        </span> 

        <!-- thumbnail navigator container --> 
        <div u="thumbnavigator" class="jssort03"> 
         <!-- Thumbnail Item Skin Begin --> 
         <div u="slides" class="slide_item"> 
          <div u="prototype" class="p"> 
           <div class=w><div u="thumbnailtemplate" class="t"></div></div> 
           <div class=c></div> 
          </div> 
         </div> 
         <!-- Thumbnail Item Skin End --> 
        </div> 
        <script> 
         //jssor_slider2_starter('slider2_container'); 
        </script> 
       </div> 

код JS ... ...

var jssor_slider1 = new $JssorSlider$(containerId, options); 
    jssor_slider1.$On($JssorSlider$.$EVT_CLICK,function(sliderIndex,eventData){ 
     console.log(sliderIndex); 
     if(sliderIndex == 0){ 
      $('.slider2_container').html(''); 
      var imgHtmls = ''; 
      for(var i=0;i<imgData.gaojifang.length;i++){ 
       imgHtmls += '<div><img u="image" src="'+imgData.gaojifang[i]+'" /><img u="thumb" src="'+imgData.gaojifang[i]+'" /></div>' 
      } 
      $('.slider2_container').html(imgHtmls); 
      jssor_slider2_starter('slider2_container'); 
     }else if(sliderIndex == 1){ 
      $('.slider2_container').html(''); 
      var imgHtmls = ''; 
      for(var i=0;i<imgData.gaojishanjingfang.length;i++){ 
       imgHtmls += '<div><img u="image" src="'+imgData.gaojifang[i]+'" /><img u="thumb" src="'+imgData.gaojifang[i]+'" /></div>' 
      } 
      $('.slider2_container').html(imgHtmls); 
      jssor_slider2_starter('slider2_container'); 
     } 

    }); 

...

Renderings: enter image description here

enter image description here

, что я должен делать, спасибо ...

ответ

0

Jssor слайдер работает с фиксированным количеством слайдов. На данный момент добавление/удаление слайда динамически не поддерживается.

Способом замены контента является замена содержимого в любом слайде.