Не работают слайдеры под табами
Здравствуйте!
Помогите дотюкать, как заставить работать скрипт слайдера в табе. А конкретно. Для слайдера использую плагин 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:04. |