Swiper.js 在幻灯片之间自动播放时变慢答案

【问题标题】：Swiper.js slows down on autoplay between slidesSwiper.js 在幻灯片之间自动播放时变慢
【发布时间】：2022-11-20 03:56:59
【问题描述】：

我的第一个问题是 Stack overflow！希望有人能提供帮助。

我用 swiper.js 创建了一个自动播放滑块，虽然它一直很好地滑动，但它总是在每张幻灯片之间停止或减慢速度。我如何让它顺利继续？

我尝试删除一些参数，但似乎无济于事。

      var swiper = new Swiper(".mySwiper", {
//      grabCursor: true,
    loop: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false
    },
//     freeMode: true,
    speed: 1000,
    spaceBetween: 0,
        
//  keyboard: {
//       enabled: true,
//     },
        breakpoints: {
      320: {
        slidesPerView: 1.2,            
      },
      500: {
        slidesPerView: 2.2,
      },
      650: {
        slidesPerView: 2.5,
      },
      840: {
        slidesPerView: 3,
      },
      1000: {
        slidesPerView: 3.5,
      }          
    }
      });

    .mySwiper {
    -webkit-transition-timing-function:linear!important;
    -o-transition-timing-function:linear!important;
    transition-timing-function:linear!important;
  }
  .our_brand-section_image img {
    max-width: 200px;
  }
/*   Swiper Styles */
  .swiper-slide {
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: auto;
  }

   <head>
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />  
</head>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <div class="our_brand-section-image_section swiper mySwiper">
    <div class="swiper-wrapper">    

    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>
  </div>

</div>

【问题讨论】：

标签： javascript swiper.js

【解决方案1】：

添加这个为我解决了这个问题。

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

【讨论】：