主页 / 问题 / 972822
Accepted
E_K
Asked:2020-04-23 06:17:10 +0000 UTC2020-04-23 06:17:10 +0000 UTC

如何使用 swiper.js 模拟“选框”？

  • 772

问题是，即使delay: 0在更换幻灯片之前有一个停止。如何彻底去除？

var swiper = new Swiper('#js-carousel', {
  slidesPerView: 3,
  spaceBetween: 30,
  speed: 2000,
  loop: true,
  autoplay: {
    delay: 0,
  },
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="container">
  <div class="row">
    <div class="swiper-container" id="js-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 1" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 2" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 3" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 4" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 5" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 6" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 7" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 8" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 9" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 10" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    尝试将您的样式更改transition-timing-function为linear：

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


    var swiper = new Swiper('#js-carousel', {  
  slidesPerView: 3,
  spaceBetween: 30,
  speed: 2000,
  loop: true,
  //allowTouchMove: false, // можно ещё отключить свайп
  autoplay: {
    delay: 0,
    disableOnInteraction: false // или сделать так, чтобы восстанавливался autoplay после взаимодействия
  }
});
    .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}

.swiper-slide img{
  max-width: 100%;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="container">
  <div class="row">
    <div class="swiper-container" id="js-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 1" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 2" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 3" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 4" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 5" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 6" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 7" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 8" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 9" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 10" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

    • 1

相关问题