Не работают слайдеры под табами
Здравствуйте!
Помогите дотюкать, как заставить работать скрипт слайдера в табе. А конкретно. Для слайдера использую плагин 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> И для будущего хочу понять, как избежать таких проблем? |
Куда копать, кто поможет
Ну хоть кто-нибудь объясните пожалуйста как сделать чтобы каруселька загружалась во вкладке, когда переключаешь табы
|
popuas82,
Лучше ссылку на страницу с примером - не айс просить помощи и помогающим склеивать страницу |
Вложений: 1
Здравствуйте!
Цитата:
|
Вроде бы что то получилось
В общем как нуб в яваскрипте я поднапряг извилины и что то вроде вышло...
выкинул из кода лишний скрипт библиотеку jqueri ui и собрал всё на плагине Slider kit и у меня в итоге получился вот такой код
$(window).load(function(){
var cortwo = 0;
function coruselTwo(){
var cortwo = 1;
$("#carousel_two").sliderkit({
auto:false,
autospeed:4000,
shownavitems:5,
circular:true,
fastchange:true,
scrolleasing:"easeOutBack",
scrollspeed:500
});
};
function coruselOne(){
$("#carousel_one").sliderkit({
auto:false,
autospeed:4000,
shownavitems:5,
circular:false,
fastchange:true,
scrolleasing:"easeOutBounce",
scrollspeed:500
});
};
if (cortwo == 0) coruselOne();
$(".tabs-imbricate_one").click(function() {
$("#carousel_one").css('display','block');
$("#carousel_two").css('display','none');
setTimeout(coruselOne, 100)
});
$(".tabs-imbricate_two").click(function() {
$("#carousel_two").css('display','block');
$("#carousel_one").css('display','none');
setTimeout(coruselTwo, 20)
});
// Tabs > Imbricated
$(".tabs-imbricate").sliderkit({
cssprefix:"customtabs",
auto:false,
tabs:true,
});
});
если есть замечания по коду, то критика профи не помешала бы... |
Как решить проблему?
Вложений: 1
Помогите пожалуйста. В JS вообще ноль.
Подключаю Slider Kit. На выходе нужно получить 5 табов, в третьем - галерея. В первом подключается хорошо, во втором и последующих - никак. К сожалению, ссылку дать не могу - делаю на Denwer`е. Библиотеку брал с официального сайта, на всякий случай - вложил архив в сообщение. Код в head:
<!-- jQuery library -->
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/external/_oldies/jquery-1.3.min.js"></script>
<!--<script type="text/javascript" src="/assets/templates/v_1.0/ex/jquery.sliderkit.1.9.2t/js/external/jquery-1.6.2.min.js"></script>-->
<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/external/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/external/jquery.mousewheel.min.js"></script>
<!-- Slider Kit scripts -->
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>
<!-- Slider Kit launch -->
<script type="text/javascript">
$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
// Tabs > Imbricated
$(".tabs-imbricate").sliderkit({
cssprefix:"customtabs",
auto:false,
freeheight:true,
tabs:true
});
// Photo gallery > With captions
$(".photosgallery-captions").sliderkit({
mousewheel:true,
keyboard:true,
shownavitems:6,
auto:false,
delaycaptions:true
});
});
</script>
<!-- Slider Kit styles -->
<link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos.css" media="screen, projection" />
<!-- Slider Kit compatibility -->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos-ie8.css" /><![endif]-->
Код HTML:
<!-- Start of tabs-imbricate -->
<div class="customtabs tabs-imbricate">
<div class="customtabs-nav">
<div class="customtabs-nav-clip">
<ul>
<li><a href="#">Таб 1</a></li>
<li><a href="#">Таб 2</a></li>
<li><a href="#">Таб 3 с фотогалереей</a></li>
<li><a href="#">Таб 4</a></li>
<li><a href="#">Таб 5</a></li>
</ul>
</div>
</div>
<div class="customtabs-panels">
<div class="customtabs-panel">Lorem Ipsum 1</div>
<div class="customtabs-panel">Lorem Ipsum 2</div>
<div class="customtabs-panel">
<!-- Start photosgallery-captions -->
<div id="photosgallery-captions" class="sliderkit">
<!-- Start Навигация -->
<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>
<li><a href="#" rel="nofollow"><img src="/thumb-img1.jpg" /></a></li>
<li><a href="#" rel="nofollow"><img src="/thumb-img2.jpg" /></a></li>
<li><a href="#" rel="nofollow"><img src="/thumb-img3.jpg" /></a></li>
</ul>
</div>
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
</div>
<!-- // end of Навигация -->
<!-- Start Вывод img -->
<div class="sliderkit-panels">
<div class="sliderkit-panel">
<img src="/img1.jpg" />
<div class="sliderkit-panel-textbox">
<div class="sliderkit-panel-text">
<p>Описание картинки 1</p>
</div>
<div class="sliderkit-panel-overlay"></div>
</div>
</div>
<div class="sliderkit-panel">
<img src="/img2.jpg" />
<div class="sliderkit-panel-textbox">
<div class="sliderkit-panel-text">
<p>Описание картинки 2</p>
</div>
<div class="sliderkit-panel-overlay"></div>
</div>
</div>
<div class="sliderkit-panel">
<img src="/img3.jpg" />
<div class="sliderkit-panel-textbox">
<div class="sliderkit-panel-text">
<p>Описание картинки 3</p>
</div>
<div class="sliderkit-panel-overlay"></div>
</div>
</div>
</div>
<!-- // end of Вывод img -->
</div>
<!-- // end of photosgallery-captions -->
</div>
<div class="customtabs-panel">Lorem Ipsum 4</div>
<div class="customtabs-panel">Lorem Ipsum 5</div>
</div>
</div>
<!-- // end of tabs-imbricate -->
|
| Часовой пояс GMT +3, время: 06:14. |