Swiper连续循环，滑动之间没有停顿

Question

我正在为刷卡器使用这种配置：

var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  slidesPerView: 3,
  speed: 2500,
  centeredSlides: true,
  autoplay: 1000,
  autoplayDisableOnInteraction: false,
  loop: true
});

到目前为止效果很好。但是刷卡器是否有可能在每 3 张幻灯片之间不停止？现在，在接下来的 3 张幻灯片滑入之前总会有一个休息时间。我正在寻找一个无限连续循环滑块选项。这可能吗？

Answer 1

是的，这是可能的，大了mariorendic

var swiperOptions = {
  loop: true,
  freeMode: true,
  spaceBetween: 0,
  grabCursor: true,
  slidesPerView: 7,
  loop: true,
  autoplay: {
    delay: 1,
    disableOnInteraction: true
  },
  freeMode: true,
  speed: 5000,
  freeModeMomentum: false
};

var swiper = new Swiper(".swiper-container", swiperOptions);

body {
  margin: 0;
  padding: 0;
  background: #eee;
  font-family: sans-serif;
  font-size: 14px;
  background: #404449;
  
}

.swiper-container {
  height: calc(100vh - 120px);
  margin: 60px;
}


.swiper-slide {
  width: 28vw;
  overflow: hidden;
  background-position: top;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.swiper-wrapper {
  -webkit-transition-timing-function:linear!important; 
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(https://placekeanu.com/250/g);">1</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/260);">2</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/270);">3</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/270/y);">4</div>
     <div class="swiper-slide" style="background-image: url(https://placekeanu.com/280/y);">5</div>
    <div class="swiper-slide" style="background-image: url(https://placekeanu.com/190/y);">6</div>
    <div class="swiper-slide" style="background-image: url(https://placekeanu.com/300/);">7</div>
  </div>
</div>

https://codepen.io/tristanisginger/pen/dypxRbv

Answer 2

你可以通过将它添加到你的 css 来解决这个问题 （你可能需要使用选择器来激活这个规则，但它有效）：

.swiper-wrapper{
  transition-timing-function : linear;
}

Answer 3

目前没有可配置的方法来设置

autoplay: 0

，因为条件测试不区分布尔值

false

和“假”值

0

。

参见https://github.com/nolimits4web/Swiper/blob/21d2a1da5b9b2e9610ec4005aad337a4af4d729f/src/js/core.js#L590。 （同时检查 621 行）

Answer 4

我遇到了类似的问题，原因是每次调用构建方法时，我的滑动器页面都会不断添加新元素（在我的例子中是小部件）。解决方法是在添加元素之前清除所有页面或项目列表，以确保您从上次构建中删除任何先前的元素。

Answer 5

.swiper-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

------------脚本----------------

var swiper = new Swiper(".mySwipers", {
  spaceBetween: 20,
  direction: 'horizontal', 
  centeredSlides: true,
  loop: true, grabCursor: true,
  centeredSlidesBounds: true,
  slideToClickedSlide: true,
  simulateTouch: false,
  autoplay: {
    enabled: true,
    delay: 0,
    pauseOnMouseEnter: true,
    disableOnInteraction: false,
  },
  centerInsufficientSlides: true,

  speed: 15000,

  effect: 'slide',
  loopAdditionalSlides: 0,
  breakpoints: {
    768: {
      slidesPerView: 4.5
    },
    576: {
      slidesPerView: 3.5
    }
  }
});