自定义页签整合swiper切换

整合swiper，点击页签滚动至指定页面和切换页面自动选中页签。

需要引入swiper.min.js和swiper.min.css文件下载地址

swiper的HTML内容

//如果不需要拖拽滚动 在此class中加上 swiper-no-swiping
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

初始化swiper

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项 **注：如果需要提交表单数据要把loop注释掉**
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

自定义事件切换swiper页面

$(".tab_button").on("click",function(){
            if($(".selectTab").length>0){
                $(".selectTab").removeClass("selectTab");
            }
            $(this).addClass("selectTab");
			//上面不用看，是为了切换选中页签效果的。
			
            //滚动至指定的index +1为slide的页码
            //如果开启了loop模式 swiper的页码是从1开始，要+1，700为切换的间隔毫秒数。不开启loop则不用+1。
            mySwiper.slideTo($(this).index()+1, 700, true)
        })

swiper滚动切换的时候，自动切换页签。
在初始化swiper的时候加上回调函数的配置项

on:{
            slideChangeTransitionStart:function(){
                //回调方法
                //下面方法中 this.realIndex 为滚动到的页面的真实下标，从0开始。
                $(".tab_button").eq(this.realIndex).trigger("click");
            },
        },

以下为自定义页签样式，不要的请忽略。

页签1为选中样式，页签3为鼠标移入样式
下面上代码
自定义页签HTML内容

<div class="title_buttons">
    <div class="tab_button selectTab"><p>页签1</p></div>
    <div class="tab_button"><p>页签2</p></div>
    <div class="tab_button"><p>页签3</p></div>
    <div class="tab_button"><p>页签4</p></div>
</div>

css样式

    .title_buttons{
        height: 37px;
        width: 100%;
        border-bottom:solid 1px #e0e0de;
    }
    .tab_button{
        display: inline-block;
        height: 100%;

        float: left;
        cursor: pointer;
        box-sizing: content-box;
        transition: 0.5s;
        box-shadow: 5px 5px 10px #dcdcdc;

        border-top: solid 2px #f9f9f9;
        border-right: solid 1px #e0e0de;
    }
    .tab_button >p{
        -webkit-user-select:none;
        position: relative;
        top: 47%;
        transform: translateY(-50%);
        margin: auto 10px;
        color:#868686;
        transition: 0.5s;
    }
    .selectTab{
        background-color: #ffffff;
        border-top: solid 2px #1e91e2;
        border-right: solid 1px #e0e0de;
    }
    .selectTab p{
        color:#000000;
    }
    .selectTab:hover{
        background-color: #ffffff !important;
        border-right: solid 1px #e0e0de !important;
    }
    .selectTab:hover p{
        color: #000000 !important;
    }
    .tab_button:hover{
        background-color: #1e91e2;
        border-color:#1e91e2;
    }
    .tab_button:hover p{
        color: #ffffff;
    }

js代码（需要引入jquery）

$(".tab_button").on("click",function(){
        if($(".selectTab").length>0){
            $(".selectTab").removeClass("selectTab");
        }
        $(this).addClass("selectTab");
 })