利用swiper怎么实现一个导航滚动效果

今天就跟大家聊聊有关利用swiper怎么实现一个导航滚动效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

1.需求：点击导航科目，选中元素自动往前滑动处于中间位置，tab切换

<div class="swiper-container city-column-course">   <ul class="swiper-wrapper">    <li class="swiper-slide on">    <h5>推荐</h5>    <p>Recommend</p>    </li>    <li class="swiper-slide">    <h5>英语培训 </h5>    <p>English training</p>    </li>    <li class="swiper-slide">    <h5>早教 </h5>    <p>Early education</p>    </li>    <li class="swiper-slide">    <h5>设计培训 </h5>    <p>Design training</p>    </li>    <li class="swiper-slide">    <h5>舞蹈培训 </h5>    <p>Dance training</p>    </li>    <li class="swiper-slide">    <h5>艺考  </h5>    <p>Art Examination</p>    </li>   </ul>   </div>   <div class="swiper-container city-course-list">   <div class="tab-box swiper-wrapper">    <ul class="index-column-course clearfix swiper-slide">    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    </ul>    <ul class="index-column-course clearfix swiper-slide">    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    <li>     <a href="#" >     <div class="course-item-logo">      <img src="images/12120_621da.jpg" alt="">     </div>     <p class="course-item-name">高考复读培训班</p>     </a>     <a href="#" class="course-item-jg">济南大智学校</a>    </li>    </ul>   </div> </div>

js：

var mySwiper = new Swiper('.city-column-course', {    freeMode: true,    freeModeMomentumRatio: 0.5,    slidesPerView: 'auto',    });  //滑动列表，导航滑动到相应科目并居中显示  var cityList = new Swiper('.city-course-list',{  slidesPerView : 1,  onSlideChangeEnd: function(swiper){   var num=swiper.activeIndex;   $(".city-column-course").find("li").eq(num).addClass("on").siblings("li").removeClass("on");   slide = mySwiper.slides[num];   slideLeft = slide.offsetLeft;   slideWidth = slide.clientWidth;   slideCenter = slideLeft + slideWidth / 2;   // 被点击slide的中心点   mySwiper.setWrapperTransition(300);      if (slideCenter < swiperWidth / 2) {        mySwiper.setWrapperTranslate(0);      } else if (slideCenter > maxWidth) {        mySwiper.setWrapperTranslate(maxTranslate);      } else {        nowTlanslate = slideCenter - swiperWidth / 2;        mySwiper.setWrapperTranslate(-nowTlanslate);      }  }  })  swiperWidth = mySwiper.container[0].clientWidth;  maxTranslate = mySwiper.maxTranslate();  maxWidth = -maxTranslate + swiperWidth / 2;  $(".city-column-course").on('touchstart', function (e) {    e.preventDefault();  });  //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  mySwiper.on('tap', function (swiper, e) {    // e.preventDefault()    slide = swiper.slides[swiper.clickedIndex];    slideLeft = slide.offsetLeft;    slideWidth = slide.clientWidth;    slideCenter = slideLeft + slideWidth / 2;    // 被点击slide的中心点    mySwiper.setWrapperTransition(300);      if (slideCenter < swiperWidth / 2) {        mySwiper.setWrapperTranslate(0);      } else if (slideCenter > maxWidth) {        mySwiper.setWrapperTranslate(maxTranslate);      } else {        nowTlanslate = slideCenter - swiperWidth / 2;        mySwiper.setWrapperTranslate(-nowTlanslate);      }    $(".city-column-course .on").removeClass('on');    $(".city-column-course .swiper-slide").eq(swiper.clickedIndex).addClass('on');  cityList.slideTo(swiper.clickedIndex, 500, false);//切换到第一个slide });

2.需求：滑动这块，导航选中的元素随着变化

<ul class="index-column-edu-nav clearfix">    <li class="on"><a href="javascript:;" >培训汇</a></li>    <li><a href="javascript:;" >最新知识</a></li>    <li><a href="javascript:;" >品牌专题</a></li>   </ul>   <div class="swiper-container index-edu-swiper">    <div class="tab-box swiper-wrapper">    <dl class="index-column-xun swiper-slide">     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">英语口语小技巧分享</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">英语口语小技巧分享</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>    </dl>    <dl class="swiper-slide index-column-xun">     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">英语口语小技巧分享</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">英语口语小技巧分享</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">英语口语小技巧分享</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>    </dl>    <dl class="swiper-slide index-column-xun">     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">英语口语小技巧分享</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>     <dd class="clearfix">     <div class="index-xun-item-left fl">      <a href="#" class="title">高考英语语法填空题得分技巧</a>      <p class="date">2020年09月27日</p>     </div>     <a href="#" class="index-xun-item-right fr">      <img src="images/34340_4a110b.jpg" alt="">     </a>     </dd>    </dl>            </div> </div>

js：

//js var indexEdu = new Swiper('.index-edu-swiper',{  slidesPerView : 1,  onSlideChangeEnd: function(swiper){   var num=swiper.activeIndex;   $(".index-column-edu-nav").find("li").eq(num).addClass("on").siblings("li").removeClass("on");  }  })  $(document).on("click",".index-column-edu-nav li",function(){  $(this).addClass("on").siblings("li").removeClass("on");  var num=$(this).index();  indexEdu.slideTo(num, 500, false);//切换到第n个slide，速度为1秒  })

看完上述内容，你们对利用swiper怎么实现一个导航滚动效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。