Question

我正在捣乱'因为我找不到我的代码有什么问题让jssor滑块响应。下面的代码来自他们网站上的文档，我已经多次检查过，它并不复杂，但简单的API $ScaleWidth()对页面没有影响，如果你在它之外使用它功能。你可以在这里看到rickymignanego.com

我重复下面的剧本：

<script>
jQuery(document).ready(function ($) {   
     var _CaptionTransitions = [];       
         _CaptionTransitions["oBelin"] = {
            $Duration:1000,
            $FlyDirection:2,
            $Easing:{$Left:$JssorEasing$.$EaseOutBack},
            $ScaleHorizontal:0.6,
            $Opacity:2
            };        

      var options = {           
           $AutoPlay: false,            
           $CaptionSliderOptions: {                
                   $Class: $JssorCaptionSlider$,
                   $CaptionTransitions: _CaptionTransitions,
                   $PlayInMode: 1,                
                   $PlayOutMode: 3,                         
                   },

            $BulletNavigatorOptions: {                                
                $Class: $JssorBulletNavigator$,                       
                $ChanceToShow: 2,                               
                $AutoCenter: 1,                                 
                $Steps: 1,                                      
                $Lanes: 1,                                      
                $SpacingX: 10,                                  
                $SpacingY: 10,                                  
                $Orientation: 1                                 
            }                      
    };          
    var jssor_slider1 = new $JssorSlider$('home-teaser', options);

    function ScaleSlider() {
        var parentWidth = $('#home-teaser').parent().width();

        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
        }
        else
            window.setTimeout(ScaleSlider, 30);
    }
    //Scale slider after document ready
    ScaleSlider();

    //Scale slider while window load/resize/orientationchange.
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
});         

//jssor_slider1.$ScaleWidth(300);   
</script>

Answer 1

干得好，恭喜！

请完成以下步骤。

$ ScaleWidth是一个新的API（以前称为$ SetScaleWidth），你使用旧版本的jssor滑块，请下载最新版本。

响应式代码不在您的页面中，请在下面添加代码，

//responsive code begin
function ScaleSlider() {
    var parentWidth = $('#home-teaser').parent().width();

    if (parentWidth) {
        jssor_slider1.$ScaleWidth(parentWidth);
    }
    else
        window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();

//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

Jssor $ ScaleWidth似乎不起作用

1 个答案: