swiper模仿app导航联动

最新推荐文章于 2023-10-20 11:09:32 发布

a8745324

最新推荐文章于 2023-10-20 11:09:32 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/a8745324/article/details/70235138

版权

<div class="swiper-container"  id="swiper_header">

    <div class="swiper-wrapper" v-model="active">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>


</div>

<div class="swiper-container "  id="swiper_content">

    <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 class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>

    </div>
</div>



{

      var header = new Swiper('#swiper_header',{
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        slidesPerView :'auto',
        onTap: function(){
          content.slideTo( header.clickedIndex)
        }
      })
      var content = new Swiper('#swiper_content',{
        longSwipesRatio : 0.1,
        onSlideChangeStart: function(){
          updateNavPosition()
        }
      })

      function updateNavPosition(){
        $('.mint-tab-item.is-selected').removeClass('is-selected ')
        var activeNav = $('.mint-tab-item').eq(content.activeIndex).addClass('is-selected ');
          if (!activeNav.hasClass('swiper-slide-visible')) {
              console.log(1);
              if (activeNav.index()>header.activeIndex) {
                  console.log(2);
                  var thumbsPerNav = Math.floor(header.width/(activeNav.width()*2.5))-1
                  header.slideTo(activeNav.index()-thumbsPerNav)
                  console.log(thumbsPerNav);
              }
              else {
                  console.log(3);
                  header.slideTo(activeNav.index())
              }
          }
      }
    }