I have a JQuery slider implemented on the homepage of my site, however it is not working in IE7, it simply just shows all of the images in a list. It works in Chrome, Safari and Firefox.
JQuery Code:
<script>
$(document).ready(function() {
$('#slides').slides({
preload: true,
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
My HTML Code:
<div class="slides_container">
<div class="slide">
<img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/homeslide1.gif" alt="" title="homeslide1" width="900" height="350" class="alignnone size-full wp-image-2088" />
</div>
<div class="slide">
<img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/homeslide2.gif" alt="" title="homeslide2" width="900" height="350" class="alignnone size-full wp-image-2089" />
</div>
<div class="slide">
<img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/homeslide3.gif" alt="" title="homeslide3" width="900" height="350" class="alignnone size-full wp-image-2090" />
</div>
</div>
<a href="" class="prev"><img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/arrowLeft1.png" alt="" title="arrowLeft" width="19" height="22" class="alignnone size-full wp-image-2091" /></a>
<a href="" class="next"><img src="http://www.metcalfesfood.com/wp-content/uploads/2011/05/arrowRight1.png" alt="" title="arrowRight" width="19" height="22" class="alignnone size-full wp-image-2092" /></a>
My CSS Code:
#page #container {
z-index: 100;
position: relative;
}
#example {
width:900px;
height:350px;
z-index: 100;
}
#slides {
z-index: 100;
}
.slides_container {
width:900px;
overflow:hidden;
}
.slides_container div.slide {
width:900px;
height:350px;
display:block;
}
#slides .next, #slides .prev {
position:absolute;
top:164px;
left:0px;
width:19px;
height:22px;
display:block;
z-index: 999;
}
#slides .next {
left:878px;
}
Any ideas how I can get my slider working in IE7?