Sleek Geek Sleek Geek - 1 year ago 695
jQuery Question

jssor slider not working on all Browsers

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 100% width

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/" ></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 -->
jQuery(document).ready(function ($) {

var jssor_1_SlideoTransitions = [

var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 600,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$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);
else {
window.setTimeout(ScaleSlider, 30);
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

<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 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>
<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>
<!-- 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>
<!-- 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="" style="display:none">Jssor Slider </a> </div>
<!-- #endregion Jssor Slider End -->

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download