Здравствуйте!
Помогите дотюкать, как заставить работать скрипт слайдера в табе. А конкретно.
Для слайдера использую плагин 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>
И для будущего хочу понять, как избежать таких проблем?
