javascript - 自动无缝无限滚动的走马灯插件有哪些？

Question

项目用的vue2,需要做一个走马灯，但是不是那种一会儿自动滚动一下的效果。

需要自动不停的平滑滚动的那种。

使用动画自己实现了，但是到末尾的时候会闪一下，目前项目中使用的 swiper的vue版本，由于版本比较老，一下一下显示的这种方式，到末尾会有滚动到开头的动效，让能能看出来它切换回到头，而不是无缝无限循环的感觉。

由于开发时间有限，不能只靠手写实现，大家用过什么好用的，麻烦推荐一下。

Answer 1

试下 vue-seamless-scroll 是否满足需求

Answer 2

在Vue 2项目中，如果你正在寻找一个能够实现自动无缝无限平滑滚动的走马灯（轮播图）插件，以下是一些推荐的库，它们能够满足你的需求：

1. Vue Awesome Swiper
   虽然你提到Swiper（可能是指Swiper的Vue封装版本Swiper Vue）在你项目中表现不佳，但vue-awesome-swiper是Swiper的一个更现代、更灵活的Vue封装版本。它支持无缝滚动和多种自定义配置，可以调整动画效果以实现平滑滚动。你可以尝试更新到这个版本并查看是否解决了你的问题。

   安装方法：

   npm install swiper vue-awesome-swiper --save

   使用示例（请根据你的实际版本和需求调整）：

   <template>
     <swiper :options="swiperOption" class="swiper">
       <swiper-slide v-for="slide in slides" :key="slide.id">
         <!-- 你的轮播内容 -->
       </swiper-slide>
       <!-- 如果需要分页器或导航按钮，也可以添加 -->
     </swiper>
   </template>
   
   <script>
   // 引入swiper和swiper-slide组件
   import { swiper, swiperSlide } from 'vue-awesome-swiper'
   import 'swiper/css/swiper.css'
   
   export default {
     components: {
       swiper,
       swiperSlide
     },
     data() {
       return {
         swiperOption: {
           loop: true, // 开启无缝循环
           autoplay: {
             delay: 3000, // 自动切换时间间隔
           },
           // 其他配置...
         },
         slides: [/* 你的轮播内容数组 */]
       }
     }
   }
   </script>

2. Vue Carousel 3D
   如果你需要一些更酷炫的3D效果，vue-carousel-3d可能是一个不错的选择。尽管它主要专注于3D效果，但它也支持无缝滚动和自动播放。

   安装方法：

   npm install vue-carousel-3d

   注意：这个库可能更侧重于3D效果，如果你不需要复杂的3D变换，可能Swiper的Vue封装版本是更合适的选择。

3. Vue Slick Carousel
   vue-slick-carousel是另一个流行的Vue轮播图插件，它基于Slick Carousel，支持无缝滚动和自动播放。

   安装方法：

   npm install vue-slick-carousel

   使用示例（请查看官方文档以获取最新信息）：

   <template>
     <carousel :options="slickOptions">
       <div v-for="i in 10" :key="i" class="slide">
         <!-- 你的轮播内容 -->
       </div>
     </carousel>
   </template>
   
   <script>
   import Carousel from 'vue-slick-carousel'
   
   export default {
     components: {
       Carousel
     },
     data() {
       return {
         slickOptions: {
           autoplay: true,
           autoplaySpeed: 2000,
           infinite: true,
           // 其他配置...
         }
       }
     }
   }
   </script>

以上推荐中，vue-awesome-swiper由于与Swiper的紧密集成和广泛的社区支持，可能是解决你当前问题的最直接有效的方法。不过，根据你的具体需求和喜好，你也可以尝试其他两个库。