Step Carousel "Freezes" in IE7/8

[thornghost]

Step Carousel Viewer
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

I have recently "inherited" a webpage that includes the Step Carousel script. There are four tabs loaded, each with a corresponding button that causes the viewer to jump to it. Otherwise it autoscrolls. When loaded in FF or Chrome, there is no issue.

However, when loaded in IE7 or IE8 (I have not tested 6) upon loading, it displays the first image and then immediately jumps to the last. Once it has done that, any of the buttons may be pressed to cause the viewer to slide to its corresponding tab, but after that the viewer freezes and will not respond further or autoscroll.

It is implemented on the front page of this website:
www.4xspower.com

I am looking through the code right now, but any help would be appreciated as I have not used this script before.

[jscheuer1]

You inherited a nightmare. To fix this one issue is rather simple though, add the highlighted line:


<script type="text/javascript" language="javascript">
<!--//<![CDATA[
stepcarousel.setup({
galleryid: 'slider', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['', 450, 282], rightnav: ['', -35, 282]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
onslide:function(){ select_icon(statusA); },
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
function select_icon(q){
var $ = jQuery;
for(i=1;i<5 ;i++)
{
if(i==q)
{
$("#service_" + i).removeClass("sliderItem");
$("#service_" + i).addClass("sliderItemOn");
if(i=="1"){
$("#service_" + i).addClass("sliderItemOnFirst");
}

}
else
{
if(i=="1"){
$("#service_" + i).removeClass("sliderItemOnFirst");
}
$("#service_" + i).removeClass("sliderItemOn");
$('#service_'+i).addClass("sliderItem");

}
}
}
//]]>-->

</script>

[thornghost]

Thanks so much! It works great.