虽然 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 轮播图组件基础款,简单好用
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 效果
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 - 轻量级,多种轮播模式,动效细节多
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 - 服务器端渲染,性能扛把子,轮播模式多选
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 - 你想要的所有轮播样式它都有,轮播鼻祖
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
扩展阅读: