[popuas82]

Здравствуйте!
Помогите дотюкать, как заставить работать скрипт слайдера в табе. А конкретно.
Для слайдера использую плагин Google Slider kit

и для реализации табов тоже пробовал его же, но испробовал разные варианты скриптов для создания табов.

В общем в первом табе сладер подгружается хорошо, но после переключения на второй, он не отображается

подключение других скриптов правильная

<!-- jQuery library -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<!-- Slider Kit scripts -->
<script type="text/javascript" src="js/jquery.sliderkit.1.9.2.pack.js"></script>
<script type="text/javascript" src="js/facebox.js"></script>

вот как тут правильно сделать?

$(document).ready(function(){
		// Tabs плагин jquery-ui-1.8.21.custom.min.js
		$('#tabs').tabs(); 
				
		// плагин jquery.sliderkit.1.9.2.pack.js
		$("#carousel_one").sliderkit({
			auto:true,
			autospeed:4000,
			shownavitems:5,
			circular:false,
			fastchange:false,
			scrolleasing:"easeOutExpo", //"easeOutBounce, easeOutBack"
			scrollspeed:500
		});
		
		$("#carousel_two").sliderkit({
			auto:true,
			autospeed:4000,
			shownavitems:5,
			circular:false,
			fastchange:false,
			scrolleasing:"easeOutExpo", //"easeOutBounce, easeOutBack"
			scrollspeed:500
		});
		
});

Есть две таба (вкладки)

<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
			</ul>
</div>

И вот два ДОМ слайдера

<!-- tab 2 -->
			<div id="tabs-1">
				<div id="carousel_one" class="sliderkit">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
						
							<ul>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a>
								</li>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a>
								</li>
							</ul>
						</div>
						
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev">
							<a href="#" title="Scroll to the left"><span>Previous</span></a>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next">
							<a href="#" title="Scroll to the right"><span>Next</span></a>
						</div>
						
					</div>
				</div>
			</div>

<!-- tab 2 -->
			<div id="tabs-2">
				<div id="carousel_two" class="sliderkit">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
						
							<ul>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a><p>Игра света и тени в природе</p>
								</li>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a>
								</li>
							</ul>
						</div>
						
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev">
							<a href="#" title="Scroll to the left"><span>Previous</span></a>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next">
							<a href="#" title="Scroll to the right"><span>Next</span></a>
						</div>
						
					</div>
				</div>
			</div>

И для будущего хочу понять, как избежать таких проблем?