jquery image slider not working in ie8
Question
I have used an image slider (Lean Slider) on my website and it works great in IE9+, FF, Chrome, but for some reason doesn't work in IE8.
I've been trying to solve this for days and am really stuck! Would be extremely grateful for any help!
Can anyone work this out and why its not working in IE8?
HTML CODE :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://www.berkshire.co.za/js/lean-slider.js"></script>
<link rel="stylesheet" href="http://www.berkshire.co.za/css/lean-slider.css" type="text/css" />
<link rel="stylesheet" href="http://www.berkshire.co.za/sample-styles.css" type="text/css" />
<title>Bershire & Black | Finest custom suits and shirts |</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body ">
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="http://www.berkshire.co.za/images/slider/slider1.jpg" alt="" />
</div>
<div class="slide2">
<img src="http://www.berkshire.co.za/images/slider/slider2.jpg" alt="" />
</div>
<div class="slide3">
<img src="http://www.berkshire.co.za/images/slider/slider3.jpg" alt="" />
</div>
<div class="slide4">
<img src="http://www.berkshire.co.za/images/slider/slider4.jpg" alt="" / >
</div>
<div class="slide5">
<img src="http://www.berkshire.co.za/images/slider/slider5.jpg" alt="" / >
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</div>
</div>
</body>
</html>
CSS CODE :
/*
* Lean Slider v1.0
* http://dev7studios.com/lean-slider
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
.lean-slider {
position: relative;
*zoom: 1;
}
.lean-slider:before,
.lean-slider:after {
content: " ";
display: table;
}
.lean-slider:after {
clear: both;
}
.lean-slider-slide {
float: left;
width: 100%;
margin-right: -100%;
display: none;
}
.lean-slider-slide.current { display: block; }
/*
* Lean Slider Sample Styles
* http://dev7studios.com/lean-slider
*/
.slider-wrapper {
position: relative;
background: #fff url(images/loading.gif) no-repeat 50% 50%;
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
box-shadow: 0 0 0px rgba(0,0,0,0.4);
}
.lean-slider { overflow: hidden; }
.lean-slider-slide {
display: block;
position: relative;
opacity: 0;
-webkit-transition: opacity 0.6s linear;
-moz-transition: opacity 0.6s linear;
-ms-transition: opacity 0.6s linear;
-o-transition: opacity 0.6s linear;
transition: opacity 0.6s linear;
}
.lean-slider-slide.current { opacity: 1; }
.lean-slider-slide img {
display: block;
width: 100%;
}
#slider-direction-nav {
position: absolute;
left: 0;
top: 47%;
width: 100%;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
opacity: 0.2;
}
.slider-wrapper:hover #slider-direction-nav { opacity: 1; }
#slider-direction-nav a {
float: left;
display: block;
width: 26px;
height: 37px;
background: url(images/arrows.png) no-repeat 0 0;
text-indent: -9999px;
}
#slider-direction-nav .lean-slider-next {
float: right;
background-position: 100% ;
}
#slider-control-nav {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
text-align: center;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
opacity: 0.2;
}
.slider-wrapper:hover #slider-control-nav { opacity: 1; }
#slider-control-nav a {
display: inline-block;
width: 14px;
height: 14px;
background: url(images/bullets.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 3px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
#slider-control-nav a.active { background-position: 100% 0; }
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-width : 480px) {
#slider-direction-nav,
#slider-control-nav { opacity: 1; }
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#slider-direction-nav,
#slider-control-nav { opacity: 1; }
}
JS CODE
/*
* Lean Slider v1.0
* http://dev7studios.com/lean-slider
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
;(function($) {
$.fn.leanSlider = function(options) {
// Defaults
var defaults = {
pauseTime: 4000,
pauseOnHover: true,
startSlide: 0,
directionNav: '',
directionNavPrevBuilder: '',
directionNavNextBuilder: '',
controlNav: '',
controlNavBuilder: '',
prevText: 'Prev',
nextText: 'Next',
beforeChange: function(){},
afterChange: function(){},
afterLoad: function(){}
};
// Set up plugin vars
var plugin = this,
settings = {},
slider = $(this),
slides = slider.children(),
currentSlide = 0,
timer = 0;
var init = function() {
// Set up settings
settings = $.extend({}, defaults, options);
// Add inital classes
slider.addClass('lean-slider');
slides.addClass('lean-slider-slide');
currentSlide = settings.startSlide;
if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0;
$(slides[currentSlide]).addClass('current');
// Set up directionNav
if(settings.directionNav && $(settings.directionNav).length){
var prevNav = $('<a href="#" class="lean-slider-prev">'+ settings.prevText +'</a>'),
nextNav = $('<a href="#" class="lean-slider-next">'+ settings.nextText +'</a>');
if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText));
if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText));
prevNav.on('click', function(e){
e.preventDefault();
plugin.prev();
});
nextNav.on('click', function(e){
e.preventDefault();
plugin.next();
});
$(settings.directionNav).append(prevNav);
$(settings.directionNav).append(nextNav);
}
// Set up controlNav
if(settings.controlNav && $(settings.controlNav).length){
slides.each(function(i){
var controlNav = $('<a href="#" class="lean-slider-control-nav">'+ (i + 1) +'</a>');
if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i])));
controlNav.on('click', function(e){
e.preventDefault();
plugin.show(i);
});
$(settings.controlNav).append(controlNav);
});
}
// Set up pauseOnHover
if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
slider.hover(
function () {
clearTimeout(timer);
},
function () {
doTimer();
}
);
}
// Initial processing
updateControlNav();
doTimer();
// Trigger the afterLoad callback
settings.afterLoad.call(this);
return plugin;
};
// Process timer
var doTimer = function(){
if(settings.pauseTime && settings.pauseTime > 0){
clearTimeout(timer);
timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime);
}
};
// Update controlNav
var updateControlNav = function(){
if(settings.controlNav){
$('.lean-slider-control-nav', settings.controlNav).removeClass('active');
$($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active');
}
};
// Prev
plugin.prev = function(){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide--;
if(currentSlide < 0) currentSlide = slides.length - 1;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Next
plugin.next = function(){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide++;
if(currentSlide >= slides.length) currentSlide = 0;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Show
plugin.show = function(index){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide = index;
if(currentSlide < 0) currentSlide = slides.length - 1;
if(currentSlide >= slides.length) currentSlide = 0;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Call constructor
return init();
};
})(jQuery);
3 answers
solution1
6 2013-09-26 11:20:26
As detailed in its website :
Requirements
Works in all major browsers including IE9+. Requires jQuery v1.8.
solution2
2
Lean Slider only supports Internet 9 and higher according to their website:
Requirements:
Works in all major browsers including IE9+ . Requires jQuery v1.8.
solution3
0 2013-10-27 22:09:01
I was having problems too to work with Lean Slider in Internet Explorer 8. I fixed this by adding a comment in file "sample-styles.css", see the line "display: block;" and now the controlNav works and navBar too, links works and slide fine in all others browsers.
.lean-slider-slide {
/*display: block;*/
position: relative;
opacity: 0;
-webkit-transition: opacity 0.6s linear;
-moz-transition: opacity 0.6s linear;
-ms-transition: opacity 0.6s linear;
-o-transition: opacity 0.6s linear;
transition: opacity 0.6s linear;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Slider not working in IE8 and only IE8?
Nivo Slider not working in IE8
JQuery Not Working in IE8
Jquery Slider PNG black borders IE8
jQuery Slider not working in IE
jquery slider is not working in ie
Unobtrusive JQuery not working in IE8?
Jquery Dropdown not working in IE8
JQuery is:focus not working in IE8
jQuery fadeTo not working in IE8
Related Tags