Why is my JQuery Slider not working in IE7?

See more:

jQuery

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) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        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> <!-- End Slides Container -->

<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?