sliderscalejssor

scale in jssor slider


i'm fine with this scale code:

var MAX_WIDTH = 2000;

function ScaleSlider() {
    window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

but it makes a problem for slider. actually my slider option is this:

var jssor_1_options = {
    $AutoPlay: 0,
    $SlideWidth: 200,
    $SlideSpacing: 5,
    $Loop: 0,
    $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $Steps: 3
    }
}

that means it shows many images together because of "$SlideWidth: 200"

i used 12 images. but when i run the slider, it shows just about 6 or 7 image, and it thinks that the slider is finished. cant slide more than these 6 or 7.

and u should know when i delete "$Loop: 0" it works correctly.

this is a sample of my code: https://code.sololearn.com/WQ80P1R1Un0J/#


Solution

  • I checked your demo, it works.

    Edit The responsive code is missing in the ScaleSlider function

    jssor_mostsold_slider_init = function() {
        var jssor_1_options = {
            $AutoPlay: 0,
            $SlideWidth: 200,
            $SlideSpacing: 5,
            $Loop: 0,
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $Steps: 3
            }
        };
    
        var jssor_1_slider = new $JssorSlider$("jssor-mostsold-slider", jssor_1_options);
    
        /*#region responsive code begin*/
    
        var MAX_WIDTH = 2000;
    
        function ScaleSlider() {
                window.setTimeout(ScaleSlider, 30);
        }
    
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
    };
    

    See ScaleSlider exmaple below,

    function ScaleSlider() {
        var containerElement = jssor_1_slider.$Elmt.parentNode;
        var containerWidth = containerElement.clientWidth;
    
        if (containerWidth) {
    
            var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
    
            jssor_1_slider.$ScaleWidth(expectedWidth);
        }
        else {
            window.setTimeout(ScaleSlider, 30);
        }
    }