Swiper如何实现自动滚动不带中间停留/停顿的效果?

原创 野人  2022-09-11 12:01  阅读 63 次

这个需求也是野人近端时间在折腾弹幕功能的时候用到的,还是挺实用的,在Swiper上面,那么接下来野人就给大家讲下怎么实现自动滚动不带中间停留/停顿的效果哈。

HTML部分

<div class="swiper-container swiper-no-swiping">
    <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>
</div>

JavaScript部分

new Swiper(".swiper-container", {
  autoplay: {
    disableOnInteraction: false,
    delay: 0,
  },
  autoplayDisableOnInteraction: false,
  slidesPerView: 2,
  speed: 4000,
  loop: true,
});

CSS部分(这是实现不停留/卡顿最关键的部分)

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

本文地址:https://www.yerenwz.com/6221.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论