Vue3轮播图插件 vue-splide

简介

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

官网：https://github.com/Splidejs/vue-splide

安装：

npm install @splidejs/vue-splide

配置：main.ts

const app = createApp(App) import VueSplide from '@splidejs/vue-splide' app.use(VueSplide)

示例

第一步：安装配置

第二步：Demo.vue

<template><Splide :options="{ rewind: true }"><SplideSlide><img src="http://localhost:9090/wego/ad/c1.jpg"></SplideSlide><SplideSlide><img src="http://localhost:9090/wego/ad/c2.jpg"></SplideSlide><SplideSlide><img src="http://localhost:9090/wego/ad/c3.jpg"></SplideSlide><SplideSlide><img src="http://localhost:9090/wego/ad/c4.jpg"></SplideSlide><SplideSlide><img src="http://localhost:9090/wego/ad/c5.jpg"></SplideSlide></Splide> </template><script lang="ts" setup> import {Splide, SplideSlide} from '@splidejs/vue-splide' import '@splidejs/splide/dist/css/themes/splide-default.min.css' </script>

总结

以上是生活随笔为你收集整理的Vue3轮播图插件 vue-splide的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。