Search code examples
sliderjssor

jssor sliders swipe in the same time


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!


Solution

  • 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);