Jssor - 在较小的屏幕上减少幻灯片

时间:2016-08-08 07:50:48

标签: javascript jssor

我正在制作一个带有1到X张幻灯片的全宽滑块,一次显示4张幻灯片。它在大屏幕或中型屏幕上看起来非常棒,但响应式脚本会在较小的屏幕上大幅减小滑块的宽度,以便仍然包含所有4个幻灯片。有没有办法只在较小的屏幕上调整Cols或SlideWidth,这样就不会大幅调整幻灯片的大小?

$(document).ready(function(){
    var jssor_1_options = {
        $AutoPlay: true,
        $AutoPlaySteps: 4,
        $FillMode: 5,
        $Cols: 4,
        $SlideWidth: 313,
        $SlideSpacing: 15,
        $SlideDuration: 800,
        $SlideEasing: $Jease$.$OutQuint,
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $Steps: 1,
        },
    };

    var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

    function ScaleSlider() {
        var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
        if (refSize) {
            refSize = Math.min(refSize, 1920);
            jssor_1_slider.$ScaleWidth(refSize);
        }
        else {
            window.setTimeout(ScaleSlider, 30);
        }
    }

    ScaleSlider();
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
});

0 个答案:

没有答案