簡介

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。