swiper實現滑動tab切換效果

實現效果，一個滑動的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");