I'm developing web pages using latest version of JSSOR Slider (jssor.slider.mini.js) with JQuery (http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js).
JSSOR Slider works great with Chrome and Firefox, but I have multiple issues with IE11.
Firstly, The Slider is supposed to be centred (works in Chrome & FF), but is set to hard left.
Secondly, the slides are supposed to transition by fading (works in Chrome & FF), but actually slide left without fading.
Here's the code:
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=1638">
<link rel="Stylesheet" type="text/css" href="css/slider.css" />
<!-- script type="text/javascript" src="scr/jquery-2.1.3.min.js"></script -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- JSSOR works with all jquery version from 1.x to 2.x -->
<script src="scr/jssor/js/jssor.slider.mini.js"></script>
<script>
$(document).ready(function()
{
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{ $Duration: 3600, $Opacity: 2 }
];
var options = {
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 0, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$PlayOrientation: 1, //[Optional] Direction of play, 1 horizontal, 2 vertical
$PauseOnHover: 3, //[Optional] Direction 0: no pause, 1: pause for desktop, 2: pause for touch device, 3: pause for
// desktop and touch device, 4: freeze for desktop, 8: freeze for touch device,
// 12: freeze for desktop and touch device, default value is 1
$ShowLink: false //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$('SliderContainer', options);
//this will be triggered when object is clicked
$("#SliderCTA").click(function()
{
document.location.href = "main.html";
});
});
</script>
</head>
<body>
<div style="width:100%; margin: 0 auto; text-align: center;">
<div id="SliderContainer" class="Slider">
<div u="slides" class="SlideContainer">
<div><img u="image" src="img/large-blinds/01-compressed.jpg" alt="" />
</div>
<div><img u="image" src="img/large-blinds/06-compressed.jpg" alt="" />
</div>
<div><img u="image" src="img/large-blinds/02-compressed.jpg" alt="" />
</div>
<div><img u="image" src="img/large-blinds/03-compressed.jpg" alt="" />
</div>
<div><img u="image" src="img/large-blinds/07-compressed.jpg" alt="" />
</div>
<div><img u="image" src="img/large-blinds/04-compressed.jpg" alt="" />
</div>
<div><img u="image" src="img/large-blinds/05-compressed.jpg" alt="" />
</div>
</div>
<div style="position: absolute; top: 550px; left: 0px; width: 740px; height: 50px; background: #205900;display: table-cell;"></div>
<div id="SliderCTA">Find out more ...</div>
</div>
</div>
</body>
</html>
Here's the relevant CSS from slider.css:
.Slider
{
margin:0px auto;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 960px;
height: 500px;
}
.SlideContainer
{
position: absolute;
left: 0px;
top: 50px;
width: 960px;
height: 500px;
cursor: move;
overflow: hidden;
}
I have:
- changed position from absolute to relative and it makes no difference.
- changed % sizes to fixed sizes
- used "px" after all sizes
- tried all number of options in JSSOR
I'd be very grateful if someone could point to either the errors or omissions that stop this working properly in IE.
It works ok at my end. I guess you have to check it one more time.
btw, to work with
margin: 0 auto;, it's highly recommended to setposition: relative;