如何为所有幻灯片指定相同的过渡速度，而不管其宽度如何？

Question

如何为所有幻灯片指定相同的过渡速度，而不管其宽度如何？现在过渡速度取决于幻灯片的宽度-幻灯片越宽，过渡发生得越快。

https://codepen.io/anon/pen/XoyZNr

const slider = document.querySelector('.slider');
const sl = new Swiper(slider, {
  slidesPerView: 'auto',
  loop: true,
  speed: 5000,
  autoplay: {
    enabled: true,
    delay: 1,
  },
});

.slider {
  overflow: hidden;
}

.swiper-slide {
  width: auto;
  margin-right: 20px;
}

.slider__item {
  font-size: 24px;
  padding: 12px 32px;
  background-color: #ccc;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" />
<div class="slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slider__item">#looooooo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hellohellohellohellohello</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hi</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#Lorem, ipsum dolor</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#foo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#boo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#go</div>
    </div>
  </div>
</div>

Answer 1

这似乎取决于元素本身的宽度，并且在传递speed参数时，我无法找到一种对宽度进行计算的方法。

我想提出一个解决此问题的方法，直到我们找到答案为止，您可以通过删除width: auto来设置恒定宽度，或者通过设置slidesPerView来让swiper为您做这件事属性，并通过居中对齐使文本看起来更漂亮。我认为floor(max width of current screen form factor / width of the largest slide)是一个不错的选择，因此，如果最大的幻灯片的宽度为120px，而目标屏幕为240px，则一次可以容纳2张幻灯片。

const slider = document.querySelector('.slider');
const sl = new Swiper(slider, {
  slidesPerView: 'auto',
  loop: true,
  speed: 5000,
  slidesPerView: '2',
  autoplay: {
    enabled: true,
    delay: 1,
  },
});

.slider {
  overflow: hidden;
}

.swiper-slide {
  width: auto;
  margin-right: 20px;
}

.slider__item {
  font-size: 24px;
  padding: 12px 32px;
  background-color: #ccc;
  text-align: center;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" />
<div class="slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slider__item">#looooooo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hellohellohellohellohello</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#hi</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#Lorem, ipsum dolor</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#foo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#boo</div>
    </div>
    <div class="swiper-slide">
      <div class="slider__item">#go</div>
    </div>
  </div>
</div>