jQuery SlideShow Flickering Problem

JavaScript
1

I’m having a problem with my jQuery Slideshow flickering in the beginning.

www.credcoservices.com

It’s calling this from my master page:


		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: '/assets/images/slideshow/loading.gif',
				play: 10000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>

Here’s the HTML:

	<div id="slideshow-wrap">
			<div id="slides">
				<div class="slides_container">
                    <a href="/company/default.aspx" title="About CoreLogic Credco"><img src="/assets/images/slideshow/home-slide-1.jpg" width="870" height="270" alt="About CoreLogic Credco"></a>
                    <a href="/products/creditreports/creditreports.aspx " title="Credit Reports"><img src="/assets/images/slideshow/home-slide-2.jpg" width="870" height="270" alt="Credit Reports"></a>
                    <a href="/redflag/" title="Red Flag Compliance"><img src="/assets/images/slideshow/home-slide-3.jpg" width="870" height="270" alt="Red Flag Compliance"></a>
                    <a href="/RBP/" title="Risk-Based Pricing"><img src="/assets/images/slideshow/home-slide-4.jpg" width="870" height="270" alt="Risk-Based Pricing"></a>
				</div>
			</div>
    </div>

And here’s the CSS:

#slideshow-wrap {
	width:870px;
	padding:0;
	margin:0 auto;
	position:relative;
	z-index:0;
}

#slides {
	position:absolute;
	z-index:100;
}

.slides_container {
	width:870px;
	height:270px;
	overflow:hidden;
	position:relative;
}

.pagination {
	margin:10px 0 0 0;
	width:56px;
	_width: 57px;
	float:right;
	/*border: dotted 1px #e23d28;*/
}

.pagination li {
	float:left;
	margin:0 1px;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(/assets/images/slideshow/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}