Using jssor plugin as follows :
function initJssorSlide() {
var jssor_sliderh=[];
var isPlaying = true;
$.each(["sliderh1_container", "sliderh2_container"], function(index, value) {
var sliderhOptions = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$SlideDuration: 1000, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$SlideWidth: 89, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
$SlideHeight: 90, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 3, //[Optional] Space between each slide in pixels, default value is 0
$Cols: 8, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
$DragOrientation: 1,
$BulletNavigatorOptions: {//[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
}
};
jssor_sliderh[index] = new $JssorSlider$(value, sliderhOptions);
console.log(index);
if (index === 1) { // if second slider since I have to Horzontial sliders with reverse motion
jssor_sliderh[index].$Pause();
jssor_sliderh[index].$On($JssorSlider$.$EVT_STATE_CHANGE, function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd)
{
if (isPlaying) {
if (progress === progressEnd) {
jssor_sliderh[index].$PlayTo(slideIndex - 1);
}
}
});
$("#sliderh2_container").hover(function() {
isPlaying = false;
}, function() {
isPlaying = true;
jssor_sliderh[index].$Prev();
});
}
else if (index === 0){
$("#sliderh1_container").mouseleave(function() {
jssor_sliderh[0].$Next();
});
}
});
After being working suddenly EVT_STATE_CHANGE are entered once and progress is not equal progressEnd by any mean tried using EVT_PROGRESS_CHANGE and it worked but with over 180 calls the performance would be so bad so why EVT_STATE_CHANGE is entered once and how to fix it
please check out the demo http://www.jssor.com/testcase/event-handling-state-change.source.html
Maybe you missed the latest updates, or I forgot to update you.