zoukankan      html  css  js  c++  java
  • swiper插件在移动端,多个swiper左右滑动时有空白的问题

    之前在项目上用到了多个swiper、但是结构结构代码css、以及js  几乎一样的
    除了第一个swiper左右滑动有回弹、其他都没有回弹、于是尝试了各种方法都不行。

    百思不得其解 ,最后在官网终于找到了解决方法、一下是代码
    HTML代码

    <nav>
    <div class="swiper-container" id="swiper">
    <ul class="swiper-wrapper tabTwo">
    <li class="swiper-slide curTwo active"><a href="javascript:void(0);">2019</a><p class="bord"></p></li>
    <li class="swiper-slide"><a href="javascript:void(0);">2018</a><p class="bord"></p></li>
    <li class="swiper-slide"><a href="javascript:void(0);">2017</a><p class="bord"></p></li>
    <li class="swiper-slide"><a href="javascript:void(0);">2016</a><p class="bord"></p></li>
    </ul>
    </div>
    <div class="shade"></div>
    </nav>
    <div class="month on">
    <div class="swiper-container">
    <ul class="swiper-wrapper tab">
    <li class="swiper-slide cur twoActive"><a href="javascript:void(0);">11</a></li>
    <li class="swiper-slide"><a href="javascript:void(0);">11</a></li>
    <li class="swiper-slide"><a href="javascript:void(0);">11</a></li>
    <li class="swiper-slide"><a href="javascript:void(0);">11</a></li>
    </ul>
    </div>
    </div>

    <div class="month">
    <div class="swiper-container">
    <ul class="swiper-wrapper tab">
    <li class="swiper-slide cur twoActive"><a href="javascript:void(0);">12</a></li>
    <li class="swiper-slide"><a href="javascript:void(0);">12</a></li>
    <li class="swiper-slide"><a href="javascript:void(0);">12</a></li>
    <li class="swiper-slide"><a href="javascript:void(0);">12</a></li>
    </ul>
    </div>
    </div>

    四五个swiper

    接着JS代码:var mySwiper = new Swiper('.swiper-container', {

    autoplay: false,//可选选项,自动滑动
        slidesPerView : "auto",
    observer:true,
    observeParents:true,
    });
    一段js代码就可以控制全部的swiper了,因为结构什么的都一样
    只需要在原本的swioer,js代码上加上 以下这两句监听swiper就行了
    observer:true,
    observeParents:true,
  • 相关阅读:
    linux命令学习
    linux sar命令详解
    消息中间件设计
    google三驾马车
    Apache ZooKeeper 服务启动源码解释
    ubuntu16 ccls neovim coc.nvim ccls langserver安装
    ubuntu 字体安装 —— 以nerd font为例
    neovim
    vim youcompleteme conda 虚拟环境
    sublime 插件管理
  • 原文地址:https://www.cnblogs.com/MrQinjj/p/12102450.html
Copyright © 2011-2022 走看看