如何使用swipe滑塊與jQuery選項卡？

Question

我想用jQuery的標籤idangero swiper我得到的所有結果我想除了pagination.slider分頁顯示只有一個子彈。它使用單個標籤時工作正常，但我不知道如何應用swiper當兩或更多選項卡required.here是我的代碼和jsfiddle鏈接例如。 http://jsfiddle.net/Rzeiwald/wunw9enL/3/ - http://jsfiddle.net/Rzeiwald/m61qfck1/ 謝謝您的時間 HTML

 <div class="panel" style="background : transparent; border: none;"> 
     <div id="tabs-centre" style="background : transparent;margin-left:5px;border: none;"> 
     <ul> 
       <li><a href="#tabs-centre-1">op</a></li> 
       <li><a href="#tabs-centre-2">oop</a></li> 
     </ul> 


     <div id="tabs-centre-1"> 
     <!-- Swiper --> 
     <div class="swiper-container"> 
     <div class="swiper-wrapper"> 

     <div class="swiper-slide roundbox"> 
     </div> 
     <div class="swiper-slide roundbox"> 
     </div> 
     <div class="swiper-slide roundbox"> 
     </div> 
     <div class="swiper-slide roundbox"> 
     </div> 
     <div class="swiper-slide roundbox"> 
     </div> 


     </div> 
     <!-- Add Pagination --> 
     <div class="swiper-pagination" ></div> 
     <!-- Add Arrows --> 
     <div class="swiper-button-next"></div> 
     <div class="swiper-button-prev"></div> 
     </div><!--Swiper Ends--> 
     </div><!-- End: Tabs1 --> 

     <div id="tabs-centre-2"> 
     <!-- Swiper --> 
     <div class="swiper-container"> 
     <div class="swiper-wrapper"> 

     <div class="swiper-slide roundbox"> 
     </div> 


     </div> 
     <!-- Add Pagination --> 
     <div class="swiper-pagination" ></div> 
     <!-- Add Arrows --> 
     <div class="swiper-button-next"></div> 
     <div class="swiper-button-prev"></div> 
     </div><!--Swiper Ends--> 
     </div><!-- End: Tabs2 --> 

     </div> 
     </div> 

的Javascript

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    slidesPerView: 3, 
    centeredSlides: false, 
    paginationClickable: true, 
    autoplay: 2500, 
    spaceBetween: 15, 
}); 

Answer 1

1根據swiper initialization，你必須調用內部$(document).ready或body或內部window.onload末腳本。

2-您必須在swiper之後致電.tabs()。我想刷卡嘗試應用在其上隱藏或不具有寬度/高度元素等

Jsfiddle

$(document).ready(
function() { 
    var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     slidesPerView: 3, 
     centeredSlides: false, 
     paginationClickable: true, 
     autoplay: 2500, 
     spaceBetween: 15, 
    }); 
    $('#tabs').tabs(); 
});