javascript - Jssor $ScaleWidth 似乎不起作用

Question

我很挣扎，因为我找不到我的代码有什么问题来使 jssor slider 响应。下面的代码取自他们网站上的文档，我已经检查了很多次，它并不复杂，但只是 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

干得好，恭喜!

请执行以下步骤。

1. $ScaleWidth 是一个新的 API(以前称为 $SetScaleWidth)，您使用的是旧版本的 jssor slider，请下载最新版本。

2. 您的页面中没有响应代码，请在下面添加代码，

   //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