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');
}
});
...
, что я должен делать, спасибо ...