簡(jiǎn)介

Vue Splide 是一款用 TypeSript 寫(xiě)的輕量級(jí)輪播圖組件，沒(méi)有任何依賴，代碼簡(jiǎn)單清晰，體積小巧。Vue Splide 的輪播過(guò)程動(dòng)畫(huà)非常細(xì)膩，滑動(dòng)效果，末尾圖片反彈效果流暢順滑。另外 Vue Splide 有多種輪播組合，單圖輪播，N圖輪播，聚焦輪播，分頁(yè)輪播，垂直輪播等。
示例效果：

官網(wǎng)：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>

總結(jié)

以上是生活随笔為你收集整理的Vue3轮播图插件 vue-splide的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。