добавяне на слайдер в код

[embaka]

проблем с този слайдер

http://ruseller.com/lessons/160309slickslider/example/index.html

опитвам се да го интегрирам в една система, обаче съм направил един главен див slider, при което съм променил css файла така.

* 													{ margin: 0; padding: 0; }
body 												{ font-family: Arial, Helvetica, sans-serif; font-size: 8px; }
.slider .floatLeft 									{ float: left; margin-right: 10px;}
.slider .floatRight									{ float: right; }
.slider .clear 										{ clear: both; }
.slider a											{ outline: none; }


/*
	PAGE STRUCTURE
*/
.slider #page-wrap 									{ width: 500px; margin: 25px auto; position: relative; min-height: 500px;
											  background: url(img/bg.png) top center; }


/*
	TYPOGRAPHY
*/
.slider ul											{ list-style: square inside; }
.slider a, a:visited								{ color: #729dff; text-decoration: none; }
.slider a:hover, a:active							{ color: white; }
.slider blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;}

/*
	SLIDER
*/
.slider .slider-wrap								{ width: 419px; position: absolute; top: 87px; left: 40px; }			
.slider .stripViewer .panelContainer 
.slider .panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.slider .stripViewer								{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.slider .stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.slider .stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.slider .stripNavL, .stripNavR, .stripNav			{ display: none; }
.slider .nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
.slider #movers-row									{ margin: -43px 0 0 62px; }
.slider #movers-row div								{ width: 20%; float: left; }
.slider #movers-row div a.cross-link 				{ float: right; }
.slider .photo-meta-data							{ background: url(img/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.slider .photo-meta-data span 						{ font-size: 13px; }
.slider .cross-link									{ display: block; width: 62px; margin-top: -14px; 
											  position: relative; padding-top: 15px; z-index: 9999; }
.slider .active-thumb 								{ background: transparent url(img/icon-uparrowsmallwhite.png) top center no-repeat; }

въпроса ми е как да променя този ява скрипт с класовете, който са добавени, защото ми се получава следната картинка в сайта, наслагват се всички картинки една под друга, а не както в примера

<script type="text/javascript">
	
		var theInt = null;
		var $crosslink, $navthumb;
		var curclicked = 0;
		
		theInterval = function(cur){
			clearInterval(theInt);
			
			if( typeof cur != 'undefined' )
				curclicked = cur;
			
			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
				curclicked++;
				if( 6 == curclicked )
					curclicked = 0;
				
			}, 3000);
		};
		
		$(function(){
			
			$("#main-photo-slider").codaSlider();
			
			$navthumb = $(".nav-thumb");
			$crosslink = $(".cross-link");
			
			$navthumb
			.click(function() {
				var $this = $(this);
				theInterval($this.parent().attr('href').slice(1) - 1);
				return false;
			});
			
			theInterval();
		});
	</script>

 

[Gamerz]

Никой ли не знае ?