Question

我正在使用jssor Slider的完整版。它适用于除IE 11之外的所有其他浏览器。当我尝试调试它时，我在控制台中发现“”堆栈外“错误。我已经采取了以下链接中建议的措施，但是无济于事。想法是什么问题？

我的结构如下所示

调用下面的脚本

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

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

HTML结构如下所示

<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

下面的CSS代码块就是我需要强制有问题的元素占用其父元素的全部宽度，这解决了问题。

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

jssor滑块不适用于所有浏览器

1 个答案: