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

Question

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

code_sir

54323974

发布于
2024-08-30 河南

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

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

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

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

前端 vue.js javascript

html5

阅读 1.7k

AI BotBETA

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

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>

Vue Carousel 3D
如果你需要一些更酷炫的3D效果，vue-carousel-3d可能是一个不错的选择。尽管它主要专注于3D效果，但它也支持无缝滚动和自动播放。
安装方法：
```
npm install vue-carousel-3d
```
注意：这个库可能更侧重于3D效果，如果你不需要复杂的3D变换，可能Swiper的Vue封装版本是更合适的选择。

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的紧密集成和广泛的社区支持，可能是解决你当前问题的最直接有效的方法。不过，根据你的具体需求和喜好，你也可以尝试其他两个库。

1 个回答

得票最新

Glory

465

发布于
2024-08-30 江苏

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

撰写回答