swiper实现导航滚动效果

本文实例为大家分享了swiper实现导航滚动效果的具体代码，供大家参考，具体内容如下

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

  

   

   
推荐
   
Recommend
   
   

   
英语培训 
   
English training
   
   

   
早教 
   
Early education
   
   

   
设计培训 
   
Design training
   
   

   
舞蹈培训 
   
Dance training
   
   

   
艺考  
   
Art Examination
   
  
  
  

  

   

   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   
   

   

    
    

     
    
    
高考复读培训高考复读培训班
    
    济南大智学校
   
   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   

    
    

     
    
    
高考复读培训班
    
    济南大智学校
   
   
  

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.需求：滑动这块，导航选中的元素随着变化

   
培训汇
   
最新知识
   
品牌专题
  
  

   

   

    

    

     英语口语小技巧分享
     
2020年09月27日
    
    
     
    
    
    

    

     英语口语小技巧分享
     
2020年09月27日
    
    
     
    
    
   
   

    

    

     英语口语小技巧分享
     
2020年09月27日
    
    
     
    
    
    

    

     英语口语小技巧分享
     
2020年09月27日
    
    
     
    
    
    

    

     英语口语小技巧分享
     
2020年09月27日
    
    
     
    
    
   
   

    

    

     英语口语小技巧分享
     
2020年09月27日
    
    
     
    
    
    

    

     高考英语语法填空题得分技巧
     
2020年09月27日
    
    
     
    
    
   
       
   

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秒
 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。