How to resolve the error "Error: Outer container 'null' not found." coming from Jssor Slider?

Question

I've integrated Jssor Slider into my website's homepage. It's working fine on that page, but on other pages I'm getting this error checking Firebug's console:

Error: Outer container 'null' not found. jssor.js (line 66, col 14)

Line no. 66 in jssor.js is

throw new Error(msg);

I've included all the necessary files like JavaScript and CSS. Due to this error other jQuery code is also not working. I researched about the solution for it, but wasn't able to solve this problem. I have not made any change to the Jssor Slider library at all.

Following is the jQuery code I used to implement Jssor Slider:

jQuery(document).ready(function ($) {

  var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];

  var options = {
    $AutoPlay: true,                                    
    $AutoPlaySteps: 1,                                  
    $AutoPlayInterval: $('#brand_slider_time').val() * 1000,                            
    $PauseOnHover: 1,                               
    $ArrowKeyNavigation: true,                          
    $SlideDuration: 500,                                
    $MinDragOffsetToSlide: 20,                          
    $SlideSpacing: 0,                                   
    $Cols: 1,                                  
    $Align: 0,                                
    $UISearchMode: 1,                                   
    $PlayOrientation: 1,                                
    $DragOrientation: 3,                                
    $SlideshowOptions: {                                
      $Class: $JssorSlideshowRunner$,                 
      $Transitions: _SlideshowTransitions,            
      $TransitionsOrder: 1,                           
      $ShowLink: true                                    
    },

    $BulletNavigatorOptions: {                                
      $Class: $JssorBulletNavigator$,                       
      $ChanceToShow: 2,                               
      $Steps: 1,                                      
      $Rows: 1,                                      
      $SpacingX: 10,                                   
      $SpacingY: 10,                                   
      $Orientation: 1                                 
    },

    $ArrowNavigatorOptions: {
      $Class: $JssorArrowNavigator$,              
      $ChanceToShow: 2,                               
      $Steps: 1                                       
    }
  };

  var jssor_slider1 = new $JssorSlider$("slider1_container", options);


  function ScaleSlider() {
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
    if (parentWidth)
      jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
    else
      window.setTimeout(ScaleSlider, 30);
  }

  ScaleSlider();

  if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
    $(window).bind('resize', ScaleSlider);
  }

  if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
    $(window).bind("orientationchange", ScaleSlider);
  }        
});

Answer 1

Please check the code of your page.

The HTML element 'slider1_container' is missing or it has been removed by other scripts.