如何使Swiper的无限自动轮播更流畅，没有停顿感！

        相信大家都用过Swiper的无限自动轮播吧，虽然基本的功能能满足大部分需求，但是它轮播的时候明显有停顿感，这个时候给别人的视觉感受就不是很好了。

        我之前就遇到过，客户说能不能把停顿感优化掉。我开始觉得官方应该有什么属性能直接解决这个问题，于是我就去Swiper的官方文档找，发现并没有解决这个问题的属性。

        于是，我又开始尝试通过speed属性来改速度以及autoplay里的delay延时来优化停顿感，但是发现效果并不是很好。没办法我只好去网上找其它的解决方法，功夫不负有心人，在一番查找下发现了一个css属性，就能解决这个问题。

        接下来是代码展示，大家可根据自己的进行编写：

<style>
  @media screen and (min-width: 769px) { 
    .indexReviewsSwiper {
      margin-top: 76px;
      padding: 60px 0;
    }

    .indexReviewsSwiper .swiper-wrapper {
      transition-timing-function: linear !important; /* 没错就是这个属性 */
    }
 
  }

</style>

<div class="index-reviews-all">
  <div class="hidden-phone">
    <div class="container-padd60">
      <div class="index-reviews-box">
        <div class="index-reviews-header">
          <div class="index-reviews-title">{{ section.settings.title }}</div>
          <div class="index-reviews-text">{{ section.settings.text }}</div>
        </div>
        <div class="swiper indexReviewsSwiper">
          <div class="swiper-wrapper">
            {%- for block in section.blocks -%}
              <div class="swiper-slide">
                <img class="index-reviews-image" loading="lazy" src="{{ block.settings.image | img_url: '160x' }}">
              </div>
            {%- endfor -%}
          </div>
        </div>
      </div>
    </div>
  </div>



<script>
  $(document).ready(function() {
    var indexReviewsSwiper = new Swiper(".indexReviewsSwiper", {
      observer: true,
      observeParents: true,
      slidesPerView: 7,
      spaceBetween: 60,
      centeredSlides: true,
      speed: 2000,
      autoplay : {
          delay: 0,
          stopOnLastSlide: false,
          disableOnInteraction: false
      },
      loop: true,
    });

</script>

 transition-timing-function 那么这个属性是干嘛的呢？

其实它是用于指定 CSS 过渡（transition）效果中的时间函数，它控制了 CSS 属性值的变化速度。时间函数定义了在过渡期间属性值是如何从起始状态变化到最终状态的。

时间函数可以影响过渡的速度曲线，使得过渡可以是线性的、缓慢开始、缓慢结束、或者有弹性效果等。

以下是一些常见的时间函数值：

1. ease（默认值）：这是默认的时间函数，它提供了一种缓慢开始和结束的效果，通常用于使过渡看起来更加自然。

2. linear：线性时间函数表示属性值在整个过渡期间都是以相同的速度变化，没有缓慢开始或结束的效果。

3. ease-in：这个时间函数导致过渡以较慢的速度开始，然后在接近结束时加速。

4. ease-out：与 ease-in 相反，这个时间函数使过渡以较快的速度开始，然后在接近结束时减速。

5. ease-in-out：这个时间函数是 ease 的变体，它提供了一个较慢的开始和结束，中间部分是较快的。

6. cubic-bezier(n,n,n,n)：你还可以使用 cubic-bezier 函数来自定义时间函数，通过提供四个值来定义一个贝塞尔曲线。这允许你更精确地控制过渡的速度曲线。

记住我们这个要用linear时间函数值，感谢大家观看！