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

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年05月08日

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

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

  1. vue-easy-slider - Vue 轮播图组件基础款,简单好用
  2. Vue Carousel 3D - 3D 动效,动画细腻流畅,仿 iTunes CD 效果
  3. vue-splide - 轻量级,多种轮播模式,动效细节多
  4. vue-slick-carousel - 服务器端渲染,性能扛把子,轮播模式多选
  5. 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 表格组件测评与推荐

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 拖拽组件库推荐

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小时搞定。

09-kalacloud.jpg

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

一起交流

wechat-jiangchuan.jpg

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

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

扩展阅读: