关于页面中常用的效果，tab+swiper的切换很常见，多见于两种情况，一种是li切换swiper的slide，一种是li切换swiper。当tabs的li切换swiper的slide，效果如下图所示：

Html:div class=tabs wow fadeInUpul class=clearfixli class=activea href=javascript:;办公环境/a/lilia href=javascript:;实验大楼/a/lilia href=javascript:;生产基地/a/li/ul/divdiv class=tabbox wow fadeInUpdiv class=swiper-boxdiv class=swiper-wrapperdiv class=swiper-slide stop-swiping 办公环境/divdiv class=swiper-slide stop-swiping 实验大楼 /divdiv class=swiper-slide stop-swiping 生产基地/div/div!-- Add Pagination --div class=swiper-pagination/div/div!-- Add Arrows --div class=swiper-button-prev/divdiv class=swiper-button-next/div/divJS: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:

网站前端制作之tab+swiper的两种切换_成都网站搭建   https://cdnanqi.cn/wangzhanzhizuo/11221.html