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=".8.0/jquery.min.js"></script>
<script src=".js"></script>
<link rel="stylesheet" href=".css" type="text/css" />
<link rel="stylesheet" href=".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=".jpg" alt="" />
</div>
<div class="slide2">
<img src=".jpg" alt="" />
</div>
<div class="slide3">
<img src=".jpg" alt="" />
</div>
<div class="slide4">
<img src=".jpg" alt="" / >
</div>
<div class="slide5">
<img src=".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
*
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the 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
*
*/
.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
*
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the 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);
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./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./lean-slider
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource/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./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./lean-slider
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource/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);
- jsfiddle would make it easier to debug – MichaC Commented Sep 26, 2013 at 11:19
- 1 IE8 doesn't suppor CSS3 and your slider seems to make use of it. – Alvaro Commented Sep 26, 2013 at 11:19
- 2 "I've been trying to solve this for days and am really stuck!" In these days, you didn't have check DOC & support? – A. Wolff Commented Sep 26, 2013 at 11:21
3 Answers
Reset to default 6As detailed in its website:
Requirements
Works in all major browsers including IE9+. Requires jQuery v1.8.
Lean Slider only supports Internet 9 and higher according to their website:
Requirements:
Works in all major browsers including IE9+. Requires jQuery v1.8.
I was having problems too to work with Lean Slider in Internet Explorer 8. I fixed this by adding a ment 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;
}