Swiper中文论坛

标题: 选项卡有点问题，求高手处理 [打印本页]

作者: 大叔 时间: 2020-12-1 12:02
标题: 选项卡有点问题，求高手处理
<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')
      },
      }
   })

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

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)