Swiper中文论坛

标题: swiper 无缝滚动 每次切换会有停顿 [打印本页]
作者: 憨笑的丫头    时间: 2019-10-30 15:36
标题: swiper 无缝滚动 每次切换会有停顿
每次切换的时候都会有停顿一下下，麻烦大家帮忙看看。

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,
});

作者: zsy16111    时间: 2019-10-30 17:10
  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>
复制代码
作者: 穹虞    时间: 2019-10-31 16:47
本帖最后由 穹虞 于 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>
复制代码
作者: 穹虞    时间: 2019-10-31 16:50
本帖最后由 穹虞 于 2019-10-31 16:55 编辑

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

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

QQ截图20191031165346.png

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

QQ截图20191031164822.png
作者: TomBIng    时间: 2020-9-8 17:17
我也是同样问题，请问解决了吗



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2