Глючат несколько слайдеров на одной странице

Тут-тук: к Вам можно?! :)

У меня проблема: на сайте установлен слайдер и работал(-ет) нормально. Однако после установке в pop-up окнах (SP9) дополнительных слайдеров начались глюки, а именно: белый фон вместо изображений, "дополнительные" буллиты (для 4 фото 10 буллитов). Проблемма усугублюдается по мере добавления слайдеров во всплывающие pop-up окна.

Для главной страницы отдельный скрипт - slider.js, для pop-up - отдельный - slider-small.js (у малых всё с суффиксом -small)

P.S. в течении дня будет редактироваться страница. Модераторам: сделайте, пожалуйста, мои цитаты спойлерными (если возможно).

slider.js

(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;

$(document).ready(function(e) {
	$('.slide').css(
		{"position" : "absolute",
		 "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		$(".control-slide.active").removeClass("active");
		$('.control-slide').eq(slideNum).addClass('active');
		}
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#">&lt;</a><a id="nextbutton" href="#">&gt;</a>')
	.prependTo('#slider');		
	$('#nextbutton').click(function(){
		animSlide("next");
		return false;
		})
	$('#prewbutton').click(function(){
		animSlide("prew");
		return false;
		})
}
	var $adderSpan = '';
	$('.slide').each(function(index) {
			$adderSpan += '<span class = "control-slide">' + index + '</span>';
		});
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
			if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-wrap').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});
})(jQuery);

slider-small.js

(function ($) {
var hwSlideSpeed = 1000;
var hwTimeOut = 6000;
var hwNeedLinks = true;

$(document).ready(function(e) {
	$('.slide-small').css(
		{"position" : "absolute",
		 "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider-small .slide-small").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide-small').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide-small').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		$(".control-slide-small.active").removeClass("active");
		$('.control-slide-small').eq(slideNum).addClass('active');
		}
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton-small" href="#">&lt;</a><a id="nextbutton-small" href="#">&gt;</a>')
	.prependTo('#slider-small');		
	$('#nextbutton-small').click(function(){
		animSlide("next");
		return false;
		})
	$('#prewbutton-small').click(function(){
		animSlide("prew");
		return false;
		})
}
	var $adderSpan = '';
	$('.slide-small').each(function(index) {
			$adderSpan += '<span class = "control-slide-small">' + index + '</span>';
		});
	$('<div class ="sli-links-small">' + $adderSpan +'</div>').appendTo('#slider-space');
	$(".control-slide-small:first").addClass("active");
	$('.control-slide-small').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
			if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-space').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});
})(jQuery);

----------------------------------------------------------

html-главной

<div id="slider-wrap">
	<div id="slider">
		<div class="slide"><img src="img/samson-slider/slide1.jpg" alt="Samson Навозоразбрасыватель SP15" /></div>
		<div class="slide"><img src="img/samson-slider/slide2.jpg" alt="Цистерны Samson PG " /></div>
		<div class="slide"><img src="img/samson-slider/slide3.jpg" alt="Рамошланговые распределители Samson SBX2" /></div>
	</div>
</div>

----------------------------------------------

css-большого и малых

#slider-wrap{ /* Оболочка слайдера и кнопок */
	width:950px; margin:0 auto
	}
#slider { /* Оболочка слайдера */
    margin:20px auto 0;
	width:950px;
	height:395px;
	overflow: hidden;
	border:#eee solid 5px;
	position:relative;}
.slide { /* Слайд */
	width:100%;
	height:100%;
	}
.sli-links { /* Кнопки смены слайдов */
	margin-top:10px;
	text-align:center;}
.sli-links .control-slide{
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radiobg.png) center bottom no-repeat;}
.sli-links .control-slide:hover {
	cursor:pointer;
	background-position:center center;}
.sli-links .control-slide.active {
	background-position:center top;}
#prewbutton, #nextbutton { /* Ссылка "Следующий" и "Педыдущий" */
	display:block;
	width:15px;
	height:100%;
	position:absolute;
	top:0;
	overflow:hidden;
	text-indent:-999px;
	background:url(arrowbg.png) left center no-repeat;
	opacity:0.8;
	z-index:3;
	outline:none !important;}
#prewbutton {left:10px;}
#nextbutton {
	right:10px;
	background:url(arrowbg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
	opacity:1;}

html-pop-up

		
			<div id="slider-space">
				<div id="slider-small">
					<div class="slide-small"><img src="img/samson-flex/samson-flex20.jpg" alt="" /></div>
					<div class="slide-small"><img src="img/samson-flex/samson-flex20.jpg" alt="" /></div>
					<div class="slide-small"><img src="img/samson-flex/samson-flex23-bottom.jpg" alt="" /></div>
					<div class="slide-small"></div>
					<div class="slide-small"></div>
				</div>
			</div>
	
	
#slider-space { /* Оболочка слайдера и кнопок */
	width:248px; 
	}
#slider-small { /* Оболочка слайдера */
	width:248px;
	height:186px;
	overflow: hidden;
	border:#eee solid 1px;
	position:relative;
	z-index: 9}
	
.slide-small { /* Слайд */
	width:100%;
	height:100%;
	}
.sli-links-small { /* Кнопки смены слайдов */
	margin-top:-25px;
	text-align:center;
	position: relative;
	z-index: 10}
.sli-links-small .control-slide-small {
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radiobg-small.png) center bottom no-repeat;}
	
.sli-links-small .control-slide-small:hover {
	cursor:pointer;
	background-position:center center;}
	
.sli-links-small .control-slide-small.active {
	background-position:center top;}
#prewbutton-small, #nextbutton-small { /* Ссылка "Следующий" и "Педыдущий" */
	display:block;
	width:15px;
	height:100%;
	position:absolute;
	top:0;
	overflow:hidden;
	text-indent:-999px;
	background:url(arrowbg-small.png) left center no-repeat;
	opacity:0.8;
	z-index:3;
	outline:none !important;}
#prewbutton-small {left:10px;}
#nextbutton-small {
	right:10px;
	background:url(arrowBg.png) right center no-repeat;}
#prewbutton-small:hover, #nextbutton-small:hover{
	opacity:1;}	

/////////////////////////////////////////////////////////////////////////////

В pop-up в середине дополнительно:

<script type="text/javascript" src="js/slider-small.js"></script>

Вопрос: почему глючат слайдеры? Были ли похожие проблемы и как решали?

Спасибо.