如何为所有幻灯片指定相同的过渡速度，无论其宽度如何？现在，过渡速度取决于幻灯片的宽度 - 幻灯片越宽，过渡速度越快。
https://codepen.io/anon/pen/XoyZNr 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>
这似乎取决于元素本身的宽度，我无法找到一种方法来在传递时对宽度进行计算speed范围。
我想建议解决此问题的方法，直到我们找到答案，您可以通过删除来设置恒定宽度width: auto或者允许 swiper 通过设置来为您完成此操作slidesPerView属性并通过居中使文本看起来很漂亮。我认为一个好的价值是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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
