网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

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


   培训汇
   新知识
   品牌专题
  
  
   
   
    
    
     英语口语小技巧分享
     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秒
 })

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

分享名称：利用swiper怎么实现一个导航滚动效果-创新互联
文章URL：http://shouzuofang.com/article/ddsjgp.html

网站建设知识

利用swiper怎么实现一个导航滚动效果-创新互联

推荐

英语培训

早教

设计培训

舞蹈培训

艺考

其他资讯