主页/ 电商学院/网站开发/网站前端制作之tab+swiper的两种切换

网站前端制作之tab+swiper的两种切换

归类:网站开发
关于页面中常用的效果,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:

HTML

Js:

CSS

关于两个swiper轮播切换,一个显示,一个隐藏的,需要注意的是如果用display: none;和display:block; swiper的自动切换,点击li切换swiper之后,自动轮播会出错,那么可以用以下的css代替display: none;和display:block; 这样做的话,tab swiper切换后自动轮播也不会出错了。
Css:

CSS2

网站声明:以上文章内容为优加的原创文章,如需转载,请注明出处,谢谢合作!
0 喜欢
875 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解