移动端网页触摸内容滑动js插件：Swiper4_动易系统_日志_DTOP

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

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

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

解决方法是：换Swiper4

地址：

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

Swiper4.x使用方法

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

实现图一的例子：

<div class="tabs">

   <a class="active">栏目名称a>

   <a>栏目名称a>

  div>

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

   <div class="swiper-wrapper">

     <div class="swiper-slide">

       <div class="paddingLR">

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

焦点图

div>

         <ul class="infoList">图文信息列表ul>

       div>

     div>



     <div class="swiper-slide">

       <div class="paddingLR">

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

焦点图

div>

         <ul class="infoList">图文信息列表ul>

       div>

     div>

   div>

div>

"text/javascript">

window.onload = function() {

    var bannerSwiper = new Swiper('#focusNews', {

        autoplay: true,

        visibilityFullFit: true,

        loop: true,

        pagination: {

            el: '#focusNews .pagination',

        }

    });

    $(".tabs a").on('click', function(e) {

        e.preventDefault()

        $(".tabs .active").removeClass('active')

        $(this).addClass('active')

        tabsSwiper.slideTo($(this).index())

    });

    var tabsSwiper = new Swiper('#tabs-container', {

        speed: 500,

        on: {

            slideChangeTransitionStart: function() {

                $(".tabs .active").removeClass('active');

                $(".tabs a").eq(this.activeIndex).addClass('active');

            }

        }

    });

}