如何为所有幻灯片指定相同的过渡速度，而不管其宽度如何? [英] How to specify the same transition speed for all slides, regardless of their width?

问题描述

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

How to specify the same transition speed for all slides, regardless of their width? Now the transition speed depends on the width of the slide - the wider the slide, the faster the transition occurs.

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>

推荐答案

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

This seems to be dependent on the width of the elements themselves and I was not able to find a way to perform calculations to the width when passing the speed parameter.

我想提出一个解决此问题的方法，直到找到答案为止，您可以通过删除 width:auto 来设置恒定宽度，也可以通过设置 slidesPerView 属性，并通过居中对齐使文本看起来更漂亮.我认为一个好值是 floor(当前屏幕尺寸的最大宽度/最大幻灯片的宽度)，因此，如果您最大的幻灯片的宽度和目标屏幕的宽度是 120px 是 240px ，您一次可以放入2张幻灯片.

I'd like to suggest a workaround for this issue till we find an answer, you can either set a constant width by removing width: auto or allow swiper to do it for you by setting the slidesPerView attribute and make the text look pretty by centering it. I think a good value is the floor(max width of current screen form factor / width of the largest slide) so if your largest slide is 120px in width and the target screen is 240px, you can fit 2 slides in at a time.

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>

这篇关于如何为所有幻灯片指定相同的过渡速度，而不管其宽度如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！