选项卡有点问题，求高手处理

大叔

<style>
.xuan{float: left;width: 100%;}
.xuan li{float: left;width: 33%;height: 50px;line-height: 50px;text-align: center;}
.xuan .active{color: red;}
.swiper5{float: left;width:100%;}
.swiper5 .swiper-container{ /*height: calc(100vh - 50px);*/}
.swiper5 .swiper-slide{/*overflow-y: scroll;*/}
</style>

<div class="xuan">       
  <ul>
    <li class="active">首页</li>
    <li>发现</li>
    <li>用户</li>
  </ul>
</div>
  <div class="swiper-container swiper5">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: red">
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
            <p style="height:50px">1</p>
        </div>
        <div class="swiper-slide" style="background: yellow">
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
           <p style="height:50px">2</p>
        </div>
        <div class="swiper-slide" style="background: pink">
          <p style="height:50px">3</p>
          <p style="height:50px">3</p>
          <p style="height:50px">3</p>
        </div>
    </div>
  </div>

        </div>
</div>

/*选项卡*/
      $('.xuan li').each(function(e) {
        var index = $(this).index();
        $(this).hover(function() {
          $(this).addClass('active').siblings().removeClass('active')
          swiper5.slideTo(index);
        })
      })
      var swiper5 = new Swiper ('.swiper5', {
        loop: false, // 循环模式选项
        on: {
          slideChange: function () {
             $('.xuan li').eq(this.activeIndex).addClass('active').siblings().removeClass('active')
          },
        }
      })


悬停可以，拉动内容不会回调，不会触发