Slider doesn't autostart in Explorer 11 - slider

Question

I have been unable to get this code to work on IE11 - it works fine on Chrome and Firefox, Android Chrome, Opera, just not IE. In IE11, I can actually see the images pile in on top of one another until it reaches the last image, then it just stops. The last image is distorted (as if $FillMode is set to 0). However, while clicking on the image makes no difference, dragging it even the slightest amount triggers it into operation. It's as if the auto-start is ignored, but once nudged, the function works. If I do nothing, it sits on the last image loaded indefinitely.
The head:
<script type="text/javascript" src="css/jssor.slider.js"></script>
<script async>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}} ];
var _CaptionTransitions = [];
var startImgNumber =Math.floor((Math.random()*16)+1);
var options = {
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3},
$AutoPlay: true,
$DragOrientation: 1,
$AutoPlayInterval: 5000, // ADJUST!!!!
$FillMode: 1,
$SlideHeight: 260,
//$PauseOnHover: 0,
$StartIndex: startImgNumber,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
HTML code is:
<div id="PhotoShow" >
<div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 330px; height: 260px; overflow: hidden;">
<div><img data-u="image" src="photos/pic1.jpg" title="Photo By me ©2015" alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 100px; width: 200px;height: 30px; color:#FFFBF0; font-size:x-small" >Courtesy of me © 2015</div></div>
<div><img data-u="image" src="photos/pic2.jpg" title="Photo By me ©2015"alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 125px; width: 200px;height: 30px; color:#ffffff; font-size:x-small" >me © 2015</div></div>
.
.
. 16 images total
</div>
</div>
</div>
(Possible I have extra /div tags - that is not the issue, just a typo), I am completely at a loss as to why this works on everything except IE11. It appears that the function simply does not execute. I've tried window.onload and a few other things - changes nothing.
Thanks for any clues or suggestions

Answer 1

A semicolon is missing in your html code.
Please replace
<div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; ">
with
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 332px; height: 260px; ">