轮播图 v1.0.0-rc.98 +
概述
使用 <Swiper> 组件在 页面中显示轮播图片。
使用
使用该组件，首先需要手动安装 swiper 库：
pnpm
pnpm add swiperyarn
yarn add swipernpm
npm install swiper然后，手动导入 Swiper 组件：
<!-- 在 markdown 中导入 -->
<script setup>
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
</script>
<!-- 导入后，即可在 markdown 中使用 -->
<Swiper :items="['img_link1', 'img_link2']" />注册为全局组件：
.vuepress/client.ts
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
import { defineClientConfig } from 'vuepress/client'
export default defineClientConfig({
enhance({ app }) {
app.component('Swiper', Swiper)
},
})全局组件可在 其他任意 markdown 文件中使用
<Swiper :items="['img_link1', 'img_link2']" />示例:
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items | string | { link: string; href?: string; alt?: string}[] | [] | 图片链接数组，传入对象时，link表示图片链接，href表示跳转链接，alt表示图片描述 |
| width | number | string | 100% | 轮播区域宽度 |
| height | number | string | 100% | 轮播区域高度 |
| mode | 'banner' | 'carousel' | 'broadcast' | 'banner' | 轮播模式, banner: 轮播图; carousel: 走马灯; broadcast: 信息展播 |
| navigation | boolean | true | 是否显示导航按钮 |
| effect | 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards' | 'creative' | 'slide' | 轮播效果 |
| delay | number | 3000 | 轮播间隔时间, 仅当 mode: 'banner' 时生效，单位 ms |
| speed | number | 300 | 动画持续时间，单位 ms |
| loop | boolean | true | 是否循环 |
| pauseOnMouseEnter | boolean | false | 是否鼠标悬停时暂停轮播 |
| swipe | boolean | true | 是否开启手势滑动 |
更多 props 请参考 Swiper 文档
参考示例
预设动画效果
cube:
查看代码
<Swiper :items="images" effect="cube" />fade:
查看代码
<Swiper :items="images" effect="fade" />coverflow:
查看代码
<Swiper :items="images" effect="coverflow" />flip:
查看代码
<Swiper :items="images" effect="flip" />cards:
查看代码
<Swiper :items="images" effect="cards" />自定义动画效果
示例 1：
查看代码
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, translate: [0, 0, -400] },
next: { translate: ['100%', 0, 0] },
}"
/>示例 2：
查看代码
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, translate: [0, 0, -800], rotate: [180, 0, 0] },
next: { shadow: true, translate: [0, 0, -800], rotate: [-180, 0, 0] },
}"
/>示例 3：
查看代码
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, translate: ['-125%', 0, -800], rotate: [0, 0, -90] },
next: { shadow: true, translate: ['125%', 0, -800], rotate: [0, 0, 90] },
}"
/>示例 4：
查看代码
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, origin: 'left center', translate: ['-5%', 0, -200], rotate: [0, 100, 0] },
next: { origin: 'right center', translate: ['5%', 0, -200], rotate: [0, -100, 0] },
}"
/>走马灯
查看代码
<Swiper
:items="images"
mode="carousel"
:height="200"
:slides-per-view="3"
:space-between="20"
:speed="5500"
/>信息展播
查看代码
<Swiper
:items="images"
mode="broadcast"
:height="200"
:slides-per-view="3"
:space-between="20"
mousewheel
/>