swiper实现滑动tab切换效果

最新推荐文章于 2024-10-09 09:59:13 发布

shghnn

最新推荐文章于 2024-10-09 09:59:13 发布

阅读量1.8k

点赞数

分类专栏： JS

原文链接：https://blog.csdn.net/qq_40958876/article/details/103022550

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现效果，一个滑动的tab切换


    var tabItem = $(".listButton");
    var mySwiperSchedule = new Swiper(".swiper-container", {
      // 高度自适应
      autoHeight: true,
      slidesPerView: "auto",
      autoplay: false,
      on: {
        //swiper从当前slide开始过渡到另一个slide时执行
        slideChangeTransitionStart: function() {
          var n = this.activeIndex; //过渡后的slide索引
          console.log(n);
          changeTab(n);
        }
      }
    });
    //tab点击切换silde
    tabItem.click(function() {
      var ind = $(this).index();
      changeTab(ind);
      mySwiperSchedule.slideTo(ind);
    });
    //tab切换样式
    function changeTab(index) {
      tabItem
        .removeClass("active")
        .eq(index)
        .addClass("active");
    }
    $(".listButton:first").addClass("active");