登陆 注册

QQ登录QQ登陆

Swiper中文论坛»首页 › 交流 › Swiper3 交流 › swiper 无缝滚动 每次切换会有停顿
返回列表 发新帖
查看: 7166|回复: 4
打印 上一主题 下一主题

swiper 无缝滚动 每次切换会有停顿

[复制链接]
憨笑的丫头

该用户从未签到

1

主题

4

帖子

18

积分

新手上路

Rank: 1

积分
18
跳转到指定楼层
楼主
发表于 2019-10-30 15:36:58 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
每次切换的时候都会有停顿一下下，麻烦大家帮忙看看。

var swiper = new Swiper('.voca-swiper', {
        slidesPerView: 'auto',
        spaceBetween:0,
        pagination: {
                el: '.voca-sj .sos-page',
                clickable: true,
        },
        freeMode:true,
        loop:true,
        speed:2000,//匀速时间
        autoplay: {
                delay: 0,
                stopOnLastSlide: false,
                disableOnInteraction: false,
               
        },
        observer:true,
        observeParents:true,
});

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

zsy16111

该用户从未签到

0

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
推荐
发表于 2019-10-30 17:10:47 | 只看该作者
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Swiper demo</title>
  6.   <!-- Link Swiper's CSS -->
  7.   <link rel="stylesheet" href="css/swiper.min.css">

  9.   <!-- Demo styles -->
  10.   <style>
  11.     html, body {
  12.       position: relative;
  13.       height: 100%;
  14.     }
  15.     body {
  16.       background: #eee;
  17.       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  18.       font-size: 14px;
  19.       color:#000;
  20.       margin: 0;
  21.       padding: 0;
  22.     }
  23.     .swiper-container1 {
  24.       width: 100%;
  25.       height: 50%;
  26.     }
  27.     .swiper-container2 {
  28.       width: 100%;
  29.       height: 50%;
  30.     }
  31.     .swiper-slide {
  32.       text-align: center;
  33.       font-size: 18px;
  34.       background: #fff;

  36.       /* Center slide text vertically */
  37.       display: -webkit-box;
  38.       display: -ms-flexbox;
  39.       display: -webkit-flex;
  40.       display: flex;
  41.       -webkit-box-pack: center;
  42.       -ms-flex-pack: center;
  43.       -webkit-justify-content: center;
  44.       justify-content: center;
  45.       -webkit-box-align: center;
  46.       -ms-flex-align: center;
  47.       -webkit-align-items: center;
  48.       align-items: center;
  49.     }
  50.         .swiper-wrapper{
  51.                 transition-timing-function: linear !important;
  52.         }
  53.   </style>

  55. </head>
  56. <body>
  57.   <!-- Swiper -->
  58.         <div class="swiper-container1">
  59.             <div class="swiper-wrapper">
  60.                       <div class="swiper-slide"><img src="testImg/1.png" alt=""></div>
  61.                       <div class="swiper-slide"><img src="testImg/2.png" alt=""></div>
  62.                       <div class="swiper-slide"><img src="testImg/3.png" alt=""></div>
  63.                       <div class="swiper-slide"><img src="testImg/4.png" alt=""></div>
  64.                       <div class="swiper-slide"><img src="testImg/5.png" alt=""></div>
  65.                       <div class="swiper-slide"><img src="testImg/6.png" alt=""></div>
  66.                       <div class="swiper-slide"><img src="testImg/7.png" alt=""></div>
  67.                       <div class="swiper-slide"><img src="testImg/8.png" alt=""></div>
  68.             </div>
  69.           </div>
  70.        
  71.   <!-- Swiper JS -->
  72.   <script src="js/swiper.min.js"></script>

  74.   <!-- Initialize Swiper -->
  75.   <script>
  76.      var mySwiper1 = new Swiper ('.swiper-container1', {
  77.              loop: true,
  78.         speed:2000,//匀速时间
  79.                 autoplay: {
  80.                     delay: 0,
  81.                     stopOnLastSlide: false,
  82.                     disableOnInteraction: false,
  83.                 },

  85.     })
  86.   </script>
  87.   
  88. </body>
  89. </html>
复制代码
回复 支持 1 反对 0

使用道具 举报

穹虞
  • TA的每日心情
    慵懒
    2019-11-15 16:30

    • 签到天数: 4 天

    [LV.2]偶尔看看I

    0

    主题

    7

    帖子

    38

    积分

    新手上路

    Rank: 1

    积分
    38
    板凳
    发表于 2019-10-31 16:47:41 | 只看该作者
    本帖最后由 穹虞 于 2019-10-31 16:52 编辑
    1. <div class="swiper-container swiper1 swiper-no-swiping">
    2.         <div class="swiper-wrapper">
    3.           <div
    4.             class="swiper-slide"
    5.             v-for="(item, index) in list1"
    6.             :key="index"
    7.             :v-if="list1.length"
    8.           >
    9.             <img :src="itemb.path"  v-for="itemb in item" :key="itemb.id" />
    10.           </div>
    11.         </div>
    12.       </div>
    13.       <div class="swiper-container swiper2 swiper-no-swiping" dir="rtl">
    14.         <div class="swiper-wrapper">
    15.           <div
    16.             class="swiper-slide"
    17.             v-for="(item, index) in list2"
    18.             :key="index"
    19.             :v-if="list2.length"
    20.           >
    21.             <img :src="itemb.path"  v-for="itemb in item" :key="itemb.id" />
    22.           </div>
    23.         </div>
    24.       </div>
    复制代码
    回复 支持 反对

    使用道具 举报

    穹虞
  • TA的每日心情
    慵懒
    2019-11-15 16:30

    • 签到天数: 4 天

    [LV.2]偶尔看看I

    0

    主题

    7

    帖子

    38

    积分

    新手上路

    Rank: 1

    积分
    38
    地板
    发表于 2019-10-31 16:50:46 | 只看该作者
    本帖最后由 穹虞 于 2019-10-31 16:55 编辑

    有大佬帮我看下我这么写为什么第二个会出问题，这是移动端的轮播，当你滑动屏幕时第二个轮播会停下甚至是直接消失

    QQ截图20191031165346.png (63.13 KB, 下载次数: 113)

    QQ截图20191031165346.png

    QQ截图20191031164822.png (18.24 KB, 下载次数: 109)

    QQ截图20191031164822.png
    回复 支持 反对

    使用道具 举报

    TomBIng

    该用户从未签到

    0

    主题

    1

    帖子

    3

    积分

    新手上路

    Rank: 1

    积分
    3
    5#
    发表于 2020-9-8 17:17:20 | 只看该作者
    我也是同样问题，请问解决了吗
    回复 支持 反对

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号 ) 

    GMT+8, 2024-4-26 11:58 , Processed in 0.090694 second(s), 30 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表