jssor sliders swipe in the same time

145 views Asked by At

I have two Jssor "nearby-image-partial-visible-slider" on the same page and I would like them to swipe/move in the same time. Is this possible? Can somebody tell me how can I achieve this? Thank you!

1

There are 1 answers

5
jssor On BEST ANSWER
var jssor_slider1 = new $JssorSlider$(...;

//set $AutoPlay: false for the second slider
var options2 = {
    ...,
    $AutoPlay: false,
    ...
}

var jssor_slider2 = new $JssorSlider$("slider2_container", options2);

function OnPositionChange(position) {
    //let jssor_slider2 go to the same position as jssor_slider1
    jssor_slider2.$GoTo(position);
}

//listen $JssorSlider$.$EVT_POSITION_CHANGE on jssor_slider1
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnPositionChange);

To make slider1 swipe along with slider2

var jssor_slider1 = new $JssorSlider$(...;
var jssor_slider2 = new $JssorSlider$(...;

function OnPositionChange(position) {
    //let jssor_slider1 go to the same position as jssor_slider2
    jssor_slider1.$GoTo(position);
}

//listen $JssorSlider$.$EVT_POSITION_CHANGE on jssor_slider2
jssor_slider2.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnPositionChange);

Edit:

var jssor_slider1 = new $JssorSlider$(...;
var jssor_slider2 = new $JssorSlider$(...;

function OnPositionChange(position) {
    jssor_slider1.$GoTo(position);
    jssor_slider2.$GoTo(position);
}

jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnPositionChange);
jssor_slider2.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnPositionChange);