Jssor Slider funktioniert nicht auf allen Browsern

Question

Ich benutze Jssor Slider die Vollversion. Es funktioniert auf jedem anderen Browser außer IE 11. Als ich versuchte, es zu debuggen, fand ich "" out of Stack "Fehler in der Konsole. Ich habe die Maßnahmen in den Links unten, auf SO, aber ohne Erfolg. Any Ideen, was das Problem ist?

Jssor slider 100% width

Jssor slider doesn't work when using IE

Jssor Slider not working internet explorer

Meine Struktur sieht wie unter

Genannt die Skripte wie unter

<script type="text/javascript" src="js/jssor.slider.mini.js" ></script> 

<script type="text/javascript" src="js/jssor.slider.debug.js" > </script> 

Die HTML-Struktur sieht wie unter

<div id="slider-bar"> 
    <!-- #region Jssor Slider Begin --> 
    <!-- Generated by Jssor Slider Maker Online. --> 
    <!-- This demo works with jquery library --> 
    <!-- use jssor.slider.debug.js instead for debug --> 
    <script>//<![CDATA[ 
     jQuery(document).ready(function ($) { 

      var jssor_1_SlideoTransitions = [ 
       [{b:5500.0,d:3000.0,o:-1.0,r:240.0,e:{r:2.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,c:{x:51.0,t:-51.0}},{b:0.0,d:1000.0,o:1.0,c:{x:-51.0,t:51.0},e:{o:7.0,c:{x:7.0,t:7.0}}}], 
       [{b:-1.0,d:1.0,o:-1.0,sX:9.0,sY:9.0},{b:1000.0,d:1000.0,o:1.0,sX:-9.0,sY:-9.0,e:{sX:2.0,sY:2.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,r:-180.0,sX:9.0,sY:9.0},{b:2000.0,d:1000.0,o:1.0,r:180.0,sX:-9.0,sY:-9.0,e:{r:2.0,sX:2.0,sY:2.0}}], 
       [{b:-1.0,d:1.0,o:-1.0},{b:3000.0,d:2000.0,y:180.0,o:1.0,e:{y:16.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,r:-150.0},{b:7500.0,d:1600.0,o:1.0,r:150.0,e:{r:3.0}}], 
       [{b:10000.0,d:2000.0,x:-379.0,e:{x:7.0}}], 
       [{b:10000.0,d:2000.0,x:-379.0,e:{x:7.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,r:288.0,sX:9.0,sY:9.0},{b:9100.0,d:900.0,x:-1400.0,y:-660.0,o:1.0,r:-288.0,sX:-9.0,sY:-9.0,e:{r:6.0}},{b:10000.0,d:1600.0,x:-200.0,o:-1.0,e:{x:16.0}}] 
      ]; 

      var jssor_1_options = { 
       $AutoPlay: true, 
       $SlideDuration: 600, 
       $SlideEasing: $Jease$.$OutQuint, 
       $CaptionSliderOptions: { 
       $Class: $JssorCaptionSlideo$, 
       $Transitions: jssor_1_SlideoTransitions, 
       $Duration:900,x:-0.6,y:0.6, 
       }, 
       $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$ 
       }, 
       $BulletNavigatorOptions: { 
       $Class: $JssorBulletNavigator$ 

       } 
      }; 

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

      //responsive code begin 
      //you can remove responsive code if you don't want the slider scales while window resizes 
      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); 
      //responsive code end 
     }); 

        //]]> 
        </script> 
    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;"> 
    <!-- Loading Screen --> 
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> 
     <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"> </div> 
     <div style="position:absolute;display:block;background:url('2016-Website/img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"> </div> 
    </div> 
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> 
     <div class="blurDiv" data-p="225.00" style="display: none;"> <a href="#"> </a> <img data-u="image" src="img/the-image.jpg" /> 
     <div u="caption" data-t="01" class="caption"> 
      <h1>The title <br /> 
      <div class="subTitle blueOne">Title </div> 
      </h1> 
     </div> 
     </div> 
     <div class="blurDiv" data-p="225.00" style="display: none;"> <a href="#"> </a> <img data-u="image" src="img/img/the-image.jpg" /> 
     <div u="caption" data-t="01" class="caption"> 
      <h1>Title <br /> 
      <div class="subTitle blue">Now Available </div> 
      </h1> 
     </div> 
     </div> 
     <!-- Bullet Navigator --> 
     <div data-u="navigator" class="jssorb05" style="bottom:16px;" data-autocenter="1"> 
     <!-- bullet navigator item prototype --> 
     <div data-u="prototype" style="width:16px;height:16px;"> </div> 
     </div> 
     <!-- Arrow Navigator --> 
     <span data-u="arrowleft" class="jssora22l" style="left:12px;width:40px;height:58px;" data-autocenter="2"> </span> <span data-u="arrowright" class="jssora22r" style="right:12px;width:40px;height:58px;" data-autocenter="2"> </span> <a href="https://www.jssor.com" style="display:none">Jssor Slider </a> </div> 
    <!-- #endregion Jssor Slider End --> 
    </div> 
</div> 

Answer 1

Der Block von CSS-Code unten war alles, was ich das problematische Element zwingen erforderlich auf der vollen Breite nehmen von seinem Elternteil und das löste das Problem.

#jssor_1 > div div div { 
    width: 100%!important; 
}