關于頁面中常用的效果，tab+swiper的切換很常見，多見于兩種情況，一種是li切換swiper的slide，一種是li切換swiper。當tabs的li切換swiper的slide，效果如下圖所示：

Html:
<div class="tabs wow fadeInUp">
<ul class="clearfix">
<li class="active">
<a href="javascript:;">
辦公環境
</a>
</li>
<li>
<a href="javascript:;">
實驗大樓
</a>
</li>
<li>
<a href="javascript:;">
生產基地
</a>
</li>
</ul>
</div>
 
<div class="tabbox wow fadeInUp">
<div class="swiper-box">
<div class="swiper-wrapper">
            <div class="swiper-slide stop-swiping">
             辦公環境
            </div>
            <div class="swiper-slide stop-swiping">
             實驗大樓             </div>
            <div class="swiper-slide stop-swiping">
             生產基地
            </div>
       </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- Add Arrows -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>
 
 
JS:
var swiper = new Swiper('.swiper-box', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        grabCursor: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        noSwiping : true,
        noSwipingClass : 'stop-swiping',
        autoHeight: true,
        observer: true,
observeParents: true,
onSlideChangeStart: function(swiper){
var i = swiper.activeIndex;
$(".tabs ul li").eq(i).addClass("active").siblings().removeClass("active");
},
    });
$('.tabs ul li').click(function(){
var index = $(this).index();
$(this).addClass('active').siblings('li').removeClass('active');
swiper.slideTo($(this).index(), 500, false);
swiper.update();
});
先引入jquery插件和swiper.min.js和swiper.min.css文件，定義swiper的大小，初始化Swiper， tabs的li設置一個默認的選中效果active，對應swiper的一個swiper-slide，點擊tabs的li時，當前點擊的li添加默認的選中效果類名為active，其他的同級li移除active， 在獲取當前點擊的li標簽的下標$(this).index()，執行過渡到索引下標數字等于傳入參數index的頁面（slide）處，速度為500。并且可以將runCallbacks設置為false，原來是默認為true，那么transition（過渡）不會產生onSlideChange回調函數。那么，就可以做到點擊tabs的li能切換對應的swiper-slide，滑動swiper-slide也能切換li的默認選中效果類名active。
 
 
當tabs的li切換swiper時，如下圖所示：

Html:

Js:

關于兩個swiper輪播切換，一個顯示，一個隱藏的，需要注意的是如果用display: none;和display:block; swiper的自動切換，點擊li切換swiper之后，自動輪播會出錯，那么可以用以下的css代替display: none;和display:block; 這樣做的話，tab swiper切換后自動輪播也不會出錯了。
Css: