vue3 轮播图 滑动 无缝

Vue Splide是一款用TypeScript编写的轻量级轮播图组件，它没有任何依赖，代码简单清晰，体积小巧。它提供了多种轮播组合，包括单图轮播、N图轮播、聚焦轮播、分页轮播、垂直轮播等。它的轮播过程动画非常细腻，滑动效果流畅顺滑，末尾图片反弹效果也很流畅。\[1\]

在Vue3中使用Vue Splide进行轮播图滑动无缝的配置步骤如下：

第一步：安装配置
在main.ts文件中，使用以下代码安装Vue Splide：

import { createApp } from 'vue'
import VueSplide from '@splidejs/vue-splide'

const app = createApp(App)
app.use(VueSplide)

第二步：在Demo.vue文件中使用Vue Splide进行轮播图滑动无缝的示例代码如下：

<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进行轮播图滑动无缝的配置和示例代码。你可以根据自己的需求进行相应的修改和定制。
#### 引用[.reference_title]
- *1* *2* [Vue3轮播图插件 vue-splide](https://blog.csdn.net/lianghecai52171314/article/details/125818392)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]