Jssor $ScaleWidth seems not working

Question

I'm struggeling 'cause I cannot find what's wrong with my code to make jssor slider responsive. The code below has been taken from docs on their website, I've checked it many times, it isn't complicated but simply the API $ScaleWidth() doesn't have effect on page, also if you use it outside of the function. You can see it live here rickymignanego.com

I repeat the script below:

<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

Great job, congratulations!

Please go through the following steps.

1. $ScaleWidth is a new API (formerly known as $SetScaleWidth), and you are using an old version of jssor slider, please download the latest.

2. The responsive code is not in your page, please add code below,

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