SK Banner 轮播图组件

一个基于 Vue 3 和 Swiper 的响应式轮播图组件。

特性

• 响应式设计，支持移动端和桌面端
• 支持触摸滑动和鼠标操作
• 使用 Swiper 实现流畅的滑动效果
• 支持自定义样式和内容

安装

npm install sk-banner

使用方法

全局注册

import { createApp } from 'vue'
import SkBanner from 'sk-banner'
import 'sk-banner/dist/style.css'

const app = createApp(App)
app.use(SkBanner)
app.mount('#app')

局部导入

<template>
  <SkBanner :box-list="bannerList" />
</template>

<script setup>
import { SkBanner } from 'sk-banner'
import 'sk-banner/dist/style.css'

const bannerList = [
  {
    key: 1,
    tit: '标题1',
    img: '/path/to/image1.jpg',
    info: [
      { tit: '子标题1', info: '详细信息1' },
      { tit: '子标题2', info: '详细信息2' }
    ]
  },
  // 更多banner项...
]
</script>

属性

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | boxList | Array | [] | 轮播图数据列表 |

License

MIT