5 款 Vue 轮播图组件测评与推荐 - 穷尽市面上最棒的 Vue 轮播图组件库

虽然 Vue 内置了轮播图功能，但也只是最基本的单图轮播。轮播图看似功能简单，要是真深入进去写，你会发现到处是万丈深渊。市面上好用的 Vue 轮播图组件并不多，本文挑选了性能最佳和最有特色的 5 款 Vue 轮播图组件深度测评，几乎穷尽了所有轮播图可能需要的功能，看这一篇就够了。

vue-easy-slider - Vue 轮播图组件基础款，简单好用
Vue Carousel 3D - 3D 动效，动画细腻流畅，仿 iTunes CD 效果
vue-splide - 轻量级，多种轮播模式，动效细节多
vue-slick-carousel - 服务器端渲染，性能扛把子，轮播模式多选
Vue Slick - 你想要的所有轮播样式它都有，轮播鼻祖

另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置完善的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，用上早下班，详见本文文末。

1. vue-easy-slider - Vue 轮播图组件基础款，简单好用

01-vue-easy-slider

Github：https://github.com/shhdgit/vue-easy-slider

vue-easy-slider 是轮播图中的基础款，满足最简单的定时轮播的需求，代码简单，支持鼠标和触摸滑动操作，有滑动动画。

在 Vue 项目中安装：

npm i -S vue-easy-slider

然后把 vue-easy-slider 代码直接复制到对应到文件中

//main.js

import Vue from "vue";
import App from "./App.vue";
import EasySlider from "vue-easy-slider";

Vue.use(EasySlider);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

//App.vue

<template>
  <div id="app">
    <slider animation="normal" width="1100px" height="700px">
      <slider-item v-for="(i, index) in list" :key="index">
        <img :src="i">
      </slider-item>
    </slider>
  </div>
</template>

<script>
export default {
  name: "App",
  data () {
    return {
      list: [
        'https://s1.ax1x.com/2022/03/18/qk2MnO.jpg',
        'https://s1.ax1x.com/2022/03/18/qk2ujK.jpg',
        'https://s1.ax1x.com/2022/03/18/qk2nc6.jpg'
      ]
    }
	}
}
</script>

使用 slider 来配置轮播，animation 设置轮播动画效果
可禁用鼠标及触摸的滑动操作
可更改轮播的速度
在最底下有圆点图片占位标识，方便用户定位轮播图情况

扩展阅读：《顶级好用的 5 款 Vue table 表格组件测评与推荐》

2.Vue Carousel 3D - 3D 动效，动画细腻流畅，仿 iTunes CD 效果

02-Vue-Carousel-3D

Github：https://github.com/wlada/vue-carousel-3d

多数轮播图组件大同小异，而 Vue Carousel 3D 模仿 iTunes 的 CD 封面预览图做的 3D 轮播图，轮播动画流畅顺滑，特别适合产品展示页。

在 Vue 项目中安装：

npm install -S vue-carousel-3d

然后把 Vue Carousel 3D 代码直接复制到对应到文件中

//main.js

import Vue from "vue";
import App from "./App.vue";
import Carousel3d from "vue-carousel-3d";

Vue.use(Carousel3d);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

//App.vue

<template>
  <div>
    <carousel-3d>
      <slide v-for="(i, index) in list" :key="index" :index="index" >
        <img :src="i" height="270px">
      </slide>
    </carousel-3d>
  </div>
</template>

<script>
export default {
  data() {
    return {
       list: [
        'https://s1.ax1x.com/2022/03/18/qk2MnO.jpg',
        'https://s1.ax1x.com/2022/03/18/qk2ujK.jpg',
        'https://s1.ax1x.com/2022/03/18/qk2nc6.jpg'
      ]
    };
  }
};
</script>

3D 轮播图样式，仿 iTunes CD 封面
autoplay 启动和禁止自动播放
可设置无限循环
自适应图片尺寸或手动调整图片尺寸
自定义动画效果

扩展阅读：《最好用的 7 款 Vue admin 后台管理框架测评》

3. vue-splide - 轻量级，多种轮播模式，动效细节多

03-vue-splide

Github：https://github.com/Splidejs/vue-splide

Vue Splide 是一款用 TypeSript 写的轻量级轮播图组件，没有任何依赖，代码简单清晰，体积小巧。Vue Splide 的轮播过程动画非常细腻，滑动效果，末尾图片反弹效果流畅顺滑。另外 Vue Splide 有多种轮播组合，单图轮播，N图轮播，聚焦轮播，分页轮播，垂直轮播等，你想要的轮播方式，它都帮你写好了。

在 Vue 项目中安装：

npm install @splidejs/vue-splide

然后把 Vue Splide 代码直接复制到对应到文件中

//main.js 可运行 vue3

import { createApp } from 'vue';
import App from './App.vue';
import VueSplide from '@splidejs/vue-splide';

const app = createApp( App );
app.use( VueSplide );
app.mount( '#app' );

//App.vue

<template>
  <Splide :options="{ rewind: true }">
    <SplideSlide>
      <img src="https://s1.ax1x.com/2022/03/18/qk2MnO.jpg">
    </SplideSlide>
    <SplideSlide>
      <img src="https://s1.ax1x.com/2022/03/18/qk2MnO.jpg">
    </SplideSlide>
  </Splide>
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

export default defineComponent( {
  components: { Splide, SplideSlide },
} );
</script>

扩展阅读：《最好用的 6 款 Vue 拖拽组件库推荐》

4.vue-slick-carousel - 服务器端渲染，性能扛把子，轮播模式多选

04-vue-slick-carousel

github:https://github.com/gs-shop/vue-slick-carousel

vue-slick-carousel 由 react-slick 而来，重构成为 Vue 组件，它继承了 slick-carousel 的全部特性，各种图片轮播方式应有尽有。主打高效性能，在本文介绍的 5 款 Vue 轮播组件中，它的响应速度是最快，用户几乎看不到图片占位符，组件和图片就加载出来了。

在 Vue 项目中安装：

npm i vue-slick-carousel

然后把 vue-slick-carousel 代码直接复制到对应到文件中

<template>
  <div>
    <VueSlickCarousel :arrows="true" :dots="true">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </VueSlickCarousel>
  </div>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'MyComponent',
    components: { VueSlickCarousel },
  }
</script>

扩展阅读：《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐》

5. Vue Slick - 你想要的所有轮播样式它都有，轮播鼻祖

05-slick

Github：https://github.com/kenwheeler/slick/

Vue Slick 拥有你能想到的所有图片轮播样式，单图、多图、响应式、图片尺寸不一致、图片高度自适应、焦点轮播、中心模式、延迟自动轮播、预览图定位等，各式各样等轮播形式。

Vue Slick 需要 jQuery 依赖，安装时，需要一起安：

npm install jquery vue-slick --save

然后把 Vue Slick 代码直接复制到对应到文件中

//main.js

import Vue from "vue";
import App from "./App.vue";
import "slick-carousel/slick/slick.css";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

//App.vue

<template>
  <slick ref="slick" :options="slickOptions">
    <div v-for="(i, index) in list" :key="index">
      <img :src="i">
    </div>
  </slick>
</template>

<script>
import Slick from "vue-slick";

export default {
  components: { Slick },
  data() {
    return {
      slickOptions: {
        slidesToShow: 1
      },
       list: [
        'https://s1.ax1x.com/2022/03/18/qk2MnO.jpg',
        'https://s1.ax1x.com/2022/03/18/qk2ujK.jpg',
        'https://s1.ax1x.com/2022/03/18/qk2nc6.jpg'
      ]
    };
  },
  methods: {}
};
</script>

扩展阅读：《最好用的 7 款 Vue 富文本编辑器》

Vue 轮播图组件总结

看似简单的轮播图功能，其实有很多深坑，特别是动画效果这一块处理起来并不简单。本文推荐的 5 款 Vue 轮播图组件都是我亲手用过的精选，大家可按需选择。如果不想处理前端问题，推荐使用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可快速生成。

下图为使用卡拉云搭建的内部广告投放监测系统，仅需拖拽，1小时搞定。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。

一起交流

蒋川，卡拉云联合创始人，B 端数据开发。

如果你有任何问题，欢迎添加微信一起交流。我的微信 HiJiangChuan

扩展阅读：