how to add, remove a tile when the slider has finish moving form a tile to another? - jssor

Question

I would like 3 tiles: previous, current, next.
For instance, when the user move from current to next, I would like a new next tile to be added and the old previous tile to be removed.
Is there any specific javascript function which could be used ?
Or in which function should it be implemented ? (OnPark?)
Any idea, how to implement it ?
Thanks
Thanks Jssor. It works fine. For information, this is my "do something treatment"
if (slideIndex > -1 && fromIndex > -1) {
// filter first access to keep only slide changement
var difference=slideIndex-fromIndex;
if (difference === 1 || difference === -2){
//next tile was just requested
var replaceIndex=(slideIndex+1)%3;
replaceImage(replaceIndex, nextImageUrl);
} else {
//previous tile was just requested
var replaceIndex=(2+slideIndex)%3;
replaceImage(replaceIndex, previousImageUrl);
}
}
function replaceImage(index,url){
// I have add the attributes class="tilei" where i = 0,1 or 2
// inside the tags <img u="image" ...
$('.tile'+index).attr("src",url).load(function(){
var fillHeight=this.height*720/this.width;
var top=(1130-fillHeight)/2;
$('.tile'+index).attr("style","width: 720px; height: "+fillHeight+
"px; top: "+top+"px; left: 0px; position: absolute;");
});
}
Would you do this image replacement in another way to avoid duplication code with the Jssor API, or to block any interaction during image loading ? Sincerely, Didier

Answer 1

You can use your own 'prev' and 'next' buttons.
You can call $Prev or $Next method when a button is clicked.
For example,
jssor_slider1.$Prev();
jssor_slider1.$Next();
And you can display/hide/alter any button when the slider parks.
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$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)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function SlideParkEventHandler(slideIndex, fromIndex) {
//do something to display/hide/alter any button
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
});
</script>