diff --git a/examples/uni/src/pages-basic/swiper/autoplay.vue b/examples/uni/src/pages-basic/swiper/autoplay.vue
new file mode 100644
index 0000000..545f5e4
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/autoplay.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ 自动播放
+
+
+ 轮播图会每 3 秒自动切换
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+ 当前页: {{ current + 1 }} / {{ images.length }}
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/base.vue b/examples/uni/src/pages-basic/swiper/base.vue
new file mode 100644
index 0000000..f425535
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/base.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+ 当前页: {{ current + 1 }} / {{ colors.length }}
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/controlled.vue b/examples/uni/src/pages-basic/swiper/controlled.vue
new file mode 100644
index 0000000..7086de3
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/controlled.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+ 受控模式
+
+
+ 通过按钮或其他方式控制轮播
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
+
+ 上一页
+
+
+ 下一页
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/custom.vue b/examples/uni/src/pages-basic/swiper/custom.vue
new file mode 100644
index 0000000..ed96e9f
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/custom.vue
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
+ 大圆角样式
+
+
+
+
+
+ {{ item.name }}
+
+
+ {{ item.price }}
+
+
+ {{ item.desc }}
+
+
+
+
+
+
+
+
+
+ 自定义指示器颜色
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
+
+ 自定义高度（300px）
+
+
+
+
+
+ {{ item.name }}
+
+
+ {{ item.price }}
+
+
+ {{ item.desc }}
+
+
+ 查看详情
+
+
+
+
+
+
+
+
+
+ 指示器在顶部
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/indicator.vue b/examples/uni/src/pages-basic/swiper/indicator.vue
new file mode 100644
index 0000000..43b0dbd
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/indicator.vue
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+ 圆点指示器（默认）
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
+
+
+ 分数指示器
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
+
+
+ 进度条指示器
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
+
+
+ 无指示器
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/interval.vue b/examples/uni/src/pages-basic/swiper/interval.vue
new file mode 100644
index 0000000..f7b9555
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/interval.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+ 快速切换（1秒）
+
+
+
+
+ 1秒 - {{ index + 1 }}
+
+
+
+
+
+
+
+
+ 中速切换（3秒）
+
+
+
+
+ 3秒 - {{ index + 1 }}
+
+
+
+
+
+
+
+
+ 慢速切换（5秒）
+
+
+
+
+ 5秒 - {{ index + 1 }}
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/loop.vue b/examples/uni/src/pages-basic/swiper/loop.vue
new file mode 100644
index 0000000..cd599ce
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/loop.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+ 循环播放（开启）
+
+
+ 可以无限循环切换，从最后一张可以切换到第一张
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+ 循环播放（关闭）
+
+
+ 到达最后一张后不能继续向后切换
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
diff --git a/examples/uni/src/pages-basic/swiper/vertical.vue b/examples/uni/src/pages-basic/swiper/vertical.vue
new file mode 100644
index 0000000..3b8b501
--- /dev/null
+++ b/examples/uni/src/pages-basic/swiper/vertical.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ 垂直方向
+
+
+ 轮播方向为垂直，适合消息通知等场景
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+ 当前消息: {{ current + 1 }} / {{ news.length }}
+
+
+
diff --git a/packages/skiyee-uni-ui/src/components/sk-swiper-item.vue b/packages/skiyee-uni-ui/src/components/sk-swiper-item.vue
new file mode 100644
index 0000000..274ce78
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-swiper-item.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/skiyee-uni-ui/src/components/sk-swiper.vue b/packages/skiyee-uni-ui/src/components/sk-swiper.vue
new file mode 100644
index 0000000..0e82c8d
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-swiper.vue
@@ -0,0 +1,202 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ indicatorContent }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/skiyee-uni-ui/src/styles/index.ts b/packages/skiyee-uni-ui/src/styles/index.ts
index cd3dee8..b1dd7b0 100644
--- a/packages/skiyee-uni-ui/src/styles/index.ts
+++ b/packages/skiyee-uni-ui/src/styles/index.ts
@@ -51,6 +51,9 @@ export { SkSliderUcv } from './sk-slider'
export type { SkSpinnerUcvProps } from './sk-spinner'
export { SkSpinnerUcv } from './sk-spinner'
+export type { SkSwiperUcvProps } from './sk-swiper'
+export { SkSwiperUcv } from './sk-swiper'
+
export type { SkSwitchUcvProps } from './sk-switch'
export { SkSwitchUcv } from './sk-switch'
diff --git a/packages/skiyee-uni-ui/src/styles/sk-swiper.ts b/packages/skiyee-uni-ui/src/styles/sk-swiper.ts
new file mode 100644
index 0000000..5b19636
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-swiper.ts
@@ -0,0 +1,94 @@
+// @unocss-include
+/**
+ * sk-swiper 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkSwiperUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/navigation/swiper
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkSwiperUcv = ucv({
+ element: {
+ root: 'relative w-full overflow-hidden',
+ swiper: 'w-full h-full',
+ indicator: 'absolute z-10 flex items-center justify-center pointer-events-none',
+ dots: 'flex items-center gap-8',
+ dot: 'w-8 h-8 rounded-full transition-all duration-300',
+ fraction: 'px-12 py-4 rounded-full bg-black/50 text-white text-body-small',
+ progress: 'h-3 rounded-full bg-white/30 overflow-hidden',
+ progressBar: 'h-full bg-white transition-all duration-300',
+ },
+ variants: {
+ radius: {
+ none: {
+ root: 'rounded-none',
+ },
+ small: {
+ root: 'rounded-small',
+ },
+ medium: {
+ root: 'rounded-medium',
+ },
+ large: {
+ root: 'rounded-large',
+ },
+ },
+ vertical: {
+ true: {
+ swiper: 'flex-col',
+ },
+ false: {
+ swiper: 'flex-row',
+ },
+ },
+ indicatorPosition: {
+ bottom: {
+ indicator: 'bottom-16 left-0 right-0 flex-row',
+ },
+ top: {
+ indicator: 'top-16 left-0 right-0 flex-row',
+ },
+ left: {
+ indicator: 'left-16 top-0 bottom-0 flex-col',
+ },
+ right: {
+ indicator: 'right-16 top-0 bottom-0 flex-col',
+ },
+ },
+ indicatorType: {
+ dots: {},
+ fraction: {},
+ progress: {},
+ none: {
+ indicator: 'hidden',
+ },
+ },
+ dotActive: {
+ true: {
+ dot: 'w-24 bg-brand',
+ },
+ false: {
+ dot: 'bg-neutral/30',
+ },
+ },
+ },
+ defaults: {
+ radius: 'medium',
+ vertical: false,
+ indicatorPosition: 'bottom',
+ indicatorType: 'dots',
+ dotActive: false,
+ },
+})
+
+export type SkSwiperUcvProps = InferProps
diff --git a/packages/skiyee-uni-ui/src/types/index.ts b/packages/skiyee-uni-ui/src/types/index.ts
index 275bfb2..b9a7504 100644
--- a/packages/skiyee-uni-ui/src/types/index.ts
+++ b/packages/skiyee-uni-ui/src/types/index.ts
@@ -13,3 +13,4 @@ export type * from './field'
export type * from './form'
export type * from './radio'
export type * from './roller'
+export type * from './swiper'
diff --git a/packages/skiyee-uni-ui/src/types/swiper.ts b/packages/skiyee-uni-ui/src/types/swiper.ts
new file mode 100644
index 0000000..0ee2dbd
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/types/swiper.ts
@@ -0,0 +1,83 @@
+/**
+ * Swiper 轮播组件类型定义
+ *
+ * 定义轮播组件相关的类型接口。
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @see 更多文档: https://skiyee-ui.netlify.app/docs/
+ */
+
+/**
+ * 指示器类型
+ */
+export type SwiperIndicatorType = 'dots' | 'fraction' | 'progress' | 'none'
+
+/**
+ * 轮播方向
+ */
+export type SwiperDirection = 'horizontal' | 'vertical'
+
+/**
+ * 指示器位置
+ */
+export type SwiperIndicatorPosition = 'top' | 'bottom' | 'left' | 'right'
+
+/**
+ * 圆角类型
+ */
+export type SwiperRadius = 'none' | 'small' | 'medium' | 'large'
+
+/**
+ * Swiper 组件属性
+ */
+export interface SwiperProps {
+ /** 当前索引（v-model） */
+ modelValue?: number;
+ /** 是否自动播放 */
+ autoplay?: boolean;
+ /** 自动切换间隔时间（毫秒） */
+ interval?: number;
+ /** 切换动画时长（毫秒） */
+ duration?: number;
+ /** 是否循环轮播 */
+ circular?: boolean;
+ /** 是否垂直方向 */
+ vertical?: boolean;
+ /** 指示器类型 */
+ indicatorType?: SwiperIndicatorType;
+ /** 指示器位置 */
+ indicatorPosition?: SwiperIndicatorPosition;
+ /** 指示器颜色（未激活） */
+ indicatorColor?: string;
+ /** 指示器颜色（激活） */
+ indicatorActiveColor?: string;
+ /** 轮播高度 */
+ height?: string | number;
+ /** 圆角 */
+ radius?: SwiperRadius;
+}
+
+/**
+ * Swiper 组件事件
+ */
+export interface SwiperEmits {
+ /** 更新当前索引 */
+ (e: 'update:modelValue', index: number): void;
+ /** 索引改变事件 */
+ (e: 'change', index: number): void;
+ /** 过渡中事件 */
+ (e: 'transition', detail: { dx: number; dy: number }): void;
+ /** 动画结束事件 */
+ (e: 'animationfinish', index: number): void;
+}
+
+/**
+ * SwiperItem 组件属性
+ */
+export interface SwiperItemProps {
+ /** 唯一标识 */
+ itemId?: string;
+}