關于頁面中常用的效果,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切換后自動輪播也不會出錯了。
當前名稱:網站前端制作之tab+swiper的兩種切換
文章出自:http://m.newbst.com/news35/243585.html
成都網站建設公司_創新互聯,為您提供響應式網站、全網營銷推廣、外貿建站、定制開發、自適應網站、企業網站制作
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯