利用Swiper实现无缝滚动

导入swiper.min.js

<script type="text/javascript" src="js/swiper.min.js?v=8.4.7"></script>

html代码

<div class="honor_swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="javascript:;">
                <div class="img_bg">
                    <img src="/swiper-slide.jpg" title="swiper-slide" alt="swiper-slide.jpg">
                </div>
                <span>swiper-slide</span>
            </a>
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

初始化swiper.min.js

var honor_swiper = new Swiper(".honor_swiper", {
     speed: 4000,
     loop: true,
     slidesPerView: 'auto',
     freeMode: true,
     autoplay: {
          delay: 0,
          stopOnLastSlide: false,
          disableOnInteraction: false,
          loopPreventsSlide: true,
     },
     navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
     },
  });
$('.honor_swiper').on('mouseenter', function(e){
     honor_swiper.stopAutoplay();
})
$('.honor_swiper').on('mouseleave', function(e){      
     honor_swiper.startAutoplay();
});

css样式

.honor_swiper .swiper-wrapper {
     -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
     -ms-transition-timing-function: linear;
     -o-transition-timing-function: linear;
     transition-timing-function: linear;
}

参考链接:https://blog.csdn.net/m0_52761651/article/details/127065428