您的位置： 首页 >日志>动易系统>详细内容

动易系统

移动端网页触摸内容滑动js插件：Swiper4

来源：本站原创 发布时间：2018-09-30 14:41:44 浏览次数： 次 【字体：小 大】

一般我们的手机版输出，默认是使用Swiper1的来实现滑动等等效果的，但是发现当Tab切换里面带有焦点图切换的时候，就会出错了，就是下面这种情况的时候

解决方法是：换Swiper4

地址：

Swiper，是目前应用较广泛的移动端网页触摸内容滑动js插件。

Swiper4.x使用方法

Swiper4.x的全部配置选项、方法、函数：

实现图一的例子：

  1. <div class="tabs">  
  2.    <a class="active">栏目名称a> 
  3.    <a>栏目名称a> 
  4.   div> 
  1. <div id="tabs-container" class="swiper-container"> 
  2.    <div class="swiper-wrapper"> 
  3.  
  4.      <div class="swiper-slide"> 
  5.        <div class="paddingLR"> 
  6.          <div id="focusNews" class="focusNews swiper-container"> 
  7.          焦点图
  8.          div> 
  9.          <ul class="infoList">图文信息列表ul>         
  10.        div> 
  11.      div> 
  12.     
  13.      <div class="swiper-slide"> 
  14.        <div class="paddingLR"> 
  15.          <div id="focusNews" class="focusNews swiper-container">
  16.           焦点图
  17.          div> 
  18.          <ul class="infoList">图文信息列表ul>        
  19.        div> 
  20.      div> 
  21.  
  22.    div> 
  23.  div> 
  1. "text/javascript"> 
  2. window.onload = function() { 
  3.     var bannerSwiper = new Swiper('#focusNews', { 
  4.         autoplay: true, 
  5.         visibilityFullFit: true, 
  6.         loop: true, 
  7.         pagination: { 
  8.             el: '#focusNews .pagination', 
  9.         } 
  10.     });    
  11.     $(".tabs a").on('click', function(e) { 
  12.         e.preventDefault() 
  13.         $(".tabs .active").removeClass('active') 
  14.         $(this).addClass('active') 
  15.         tabsSwiper.slideTo($(this).index()) 
  16.     }); 
  17.     var tabsSwiper = new Swiper('#tabs-container', { 
  18.         speed: 500, 
  19.         on: { 
  20.             slideChangeTransitionStart: function() { 
  21.                 $(".tabs .active").removeClass('active'); 
  22.                 $(".tabs a").eq(this.activeIndex).addClass('active'); 
  23.             } 
  24.         } 
  25.     }); 
  26. } 
  27.   

 

×

用户登录