I am trying to append the JSSOR slides on the EVT_SWIPE_END event (because I want to include slides dynamically). Right after I switch to next slide and comes back to previous one JSSOR slider removes the data of previous slides and upcoming slides.
https://plive.weddingoffice.com.cn/wechat/pages/vs2.html
var flag=0;
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: 0,
$DragOrientation: 2,
$PlayOrientation: 2,
$FillMode: 2,
$Loop: 0,
$SlideWidth: 375,
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$Orientation: 2
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//////////////////////trying to get append next slide/////////////////////////////
function DisplayIndex(position, virtualPosition) {
console.log("---------------");
if(flag==0){
flag=1;
previous_position = parseInt(virtualPosition)+1;
}
else {
var total_slides = jssor_1_slider.$SlidesCount();
var current_slide = parseInt(virtualPosition)+1;
if(previous_position==current_slide){
console.log("do nothing");
}
if(previous_position>current_slide){
console.log("previous");
}
if(previous_position<current_slide){
console.log("next");
var slidesHtml='<div><img data-u="image" src="img/010.jpg" /></div>';
jssor_1_slider.$AppendSlides(slidesHtml, total_slides);
jssor_1_slider.$GoTo(position);
}
previous_position = current_slide;
}
}
jssor_1_slider.$On($JssorSlider$.$EVT_SWIPE_END, DisplayIndex);//$EVT_DRAG_END
//////////////////////trying to get append next slide ends/////////////////////////////
};
jssor_1_slider_init();
The Problem was with the z-index of image, after appending few slides, the main cover image was showing above the main content of the slide.