I'm using jssor Slider's full version. It works on every other browser except for IE 11. When I tried to debug it, I found ""out of stack" error in the console. I have taken the measures suggested in the links below, on SO but to no avail. Any ideas what the problem is?
Jssor slider doesn't work when using IE
Jssor Slider not working internet explorer
My Structure looks like below
Called the scripts like below
<script type="text/javascript" src="js/jssor.slider.mini.js" ></script>
<script type="text/javascript" src="js/jssor.slider.debug.js" > </script>
The HTML structure looks like below
<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>
The block of CSS code below was all that I needed to force the problematic element to take on the full width of its parent and that solved the problem.
#jssor_1 > div div div {
width: 100%!important;
}