diff --git a/packages/varlet-ui/src/image-preview/__tests__/__snapshots__/component.spec.js.snap b/packages/varlet-ui/src/image-preview/__tests__/__snapshots__/component.spec.js.snap
index ceab990f0ca..232a8c1fbfe 100644
--- a/packages/varlet-ui/src/image-preview/__tests__/__snapshots__/component.spec.js.snap
+++ b/packages/varlet-ui/src/image-preview/__tests__/__snapshots__/component.spec.js.snap
@@ -13,6 +13,8 @@ exports[`test image preview imagePreventDefault 1`] = `
             </div>
           </div>
           <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
         </div>
         <!--v-if-->
         <div class=\\"var-image-preview__extra\\"></div>
@@ -37,6 +39,8 @@ exports[`test image preview initialIndex 1`] = `
               <div class=\\"var-image-preview__zoom-container\\" style=\\"transform: scale(1) translate(0px, 0px);\\"><img class=\\"var-image-preview__image\\" src=\\"https://varlet.gitee.io/varlet-ui/cat2.jpg\\" alt=\\"https://varlet.gitee.io/varlet-ui/cat2.jpg\\"></div>
             </div>
           </div>
+          <!--v-if-->
+          <!--v-if-->
           <div class=\\"var-image-preview__indicators\\">2 / 2</div>
         </div>
         <!--v-if-->
diff --git a/packages/varlet-ui/src/swipe/Swipe.vue b/packages/varlet-ui/src/swipe/Swipe.vue
index 9d0d330b964..bcf08719b4e 100644
--- a/packages/varlet-ui/src/swipe/Swipe.vue
+++ b/packages/varlet-ui/src/swipe/Swipe.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="n()" ref="swipeEl">
+  <div :class="n()" ref="swipeEl" v-hover:desktop="handleHovering">
     <div
       :class="classes(n('track'), [vertical, n('--vertical')])"
       :style="{
@@ -15,6 +15,34 @@
       <slot />
     </div>
 
+    <slot v-if="navigation" name="prev" :index="index" :length="length" :prev="prev" :next="next" :to="to">
+      <transition :name="navigation === 'hover' ? n('--navigation-prev-transition') : ''">
+        <div
+          v-if="hovering || navigation === true"
+          :class="classes(n('navigation'), n('navigation-prev'))"
+          @click="prev()"
+        >
+          <var-button var-swipe-cover :class="n('navigation-prev-button')">
+            <var-icon var-swipe-cover :class="n('navigation-prev-button-icon')" name="chevron-left" />
+          </var-button>
+        </div>
+      </transition>
+    </slot>
+
+    <slot v-if="navigation" name="next" :index="index" :length="length" :prev="prev" :next="next" :to="to">
+      <transition :name="navigation === 'hover' ? n('--navigation-next-transition') : ''">
+        <div
+          v-if="hovering || navigation === true"
+          :class="classes(n('navigation'), n('navigation-next'))"
+          @click="next()"
+        >
+          <var-button var-swipe-cover :class="n('navigation-next-button')">
+            <var-icon var-swipe-cover :class="n('navigation-next-button-icon')" name="chevron-right" />
+          </var-button>
+        </div>
+      </transition>
+    </slot>
+
     <slot name="indicator" :index="index" :length="length" :prev="prev" :next="next" :to="to">
       <div :class="classes(n('indicators'), [vertical, n('--indicators-vertical')])" v-if="indicator && length">
         <div
@@ -32,6 +60,8 @@
 </template>
 
 <script lang="ts">
+import VarButton from '../button'
+import Hover from '../hover'
 import { defineComponent, ref, computed, watch, onActivated } from 'vue'
 import { useSwipeItems, type SwipeProvider } from './provide'
 import { props, type SwipeToOptions } from './props'
@@ -48,6 +78,8 @@ const { name, n, classes } = createNamespace('swipe')
 
 export default defineComponent({
   name,
+  directives: { Hover },
+  components: { VarButton },
   props,
   setup(props) {
     const swipeEl = ref<HTMLElement | null>(null)
@@ -57,6 +89,7 @@ export default defineComponent({
     const trackTranslate = ref(0)
     const lockDuration = ref(false)
     const index = ref(0)
+    const hovering = ref(false)
     const { swipeItems, bindSwipeItems, length } = useSwipeItems()
     const { popup, bindPopup } = usePopup()
     const {
@@ -399,6 +432,12 @@ export default defineComponent({
       })
     }
 
+    const handleHovering = (value: boolean) => {
+      if (props.navigation === 'hover') {
+        hovering.value = value
+      }
+    }
+
     return {
       length,
       index,
@@ -406,6 +445,7 @@ export default defineComponent({
       trackSize,
       trackTranslate,
       lockDuration,
+      hovering,
       n,
       classes,
       handleTouchstart,
@@ -416,6 +456,7 @@ export default defineComponent({
       to,
       resize,
       toNumber,
+      handleHovering,
     }
   },
 })
diff --git a/packages/varlet-ui/src/swipe/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/swipe/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..0adc7f01b20
--- /dev/null
+++ b/packages/varlet-ui/src/swipe/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,68 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test swipe component props > test swipe navigation 1`] = `
+"<div class=\\"var-swipe\\" style=\\"width: 100px; height: 100px;\\">
+  <div class=\\"var-swipe__track\\" style=\\"width: 0px; transform: translateX(0px); transition-duration: 300ms;\\">
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">1</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">2</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">3</div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`test swipe component props > test swipe navigation 2`] = `
+"<div class=\\"var-swipe\\" style=\\"width: 100px; height: 100px;\\">
+  <div class=\\"var-swipe__track\\" style=\\"width: 0px; transform: translateX(0px); transition-duration: 300ms;\\">
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">1</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">2</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">3</div>
+  </div>
+  <transition-stub name=\\"var-swipe--navigation-prev-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <div class=\\"var-swipe__navigation var-swipe__navigation-prev\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2 var-swipe__navigation-prev-button\\" type=\\"button\\" var-swipe-cover=\\"\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">
+          <var-icon var-swipe-cover=\\"\\" class=\\"var-swipe__navigation-prev-button-icon\\" name=\\"chevron-left\\"></var-icon>
+        </div>
+        <div class=\\"var-hover-overlay\\"></div>
+      </button></div>
+  </transition-stub>
+  <transition-stub name=\\"var-swipe--navigation-next-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <div class=\\"var-swipe__navigation var-swipe__navigation-next\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2 var-swipe__navigation-next-button\\" type=\\"button\\" var-swipe-cover=\\"\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">
+          <var-icon var-swipe-cover=\\"\\" class=\\"var-swipe__navigation-next-button-icon\\" name=\\"chevron-right\\"></var-icon>
+        </div>
+        <div class=\\"var-hover-overlay\\"></div>
+      </button></div>
+  </transition-stub>
+  <div class=\\"var-swipe__indicators\\">
+    <div class=\\"var-swipe__indicator var-swipe--indicator-active\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`test swipe component props > test swipe navigation 3`] = `
+"<div class=\\"var-swipe\\" style=\\"width: 100px; height: 100px;\\">
+  <div class=\\"var-swipe__track\\" style=\\"width: 0px; transform: translateX(0px); transition-duration: 300ms;\\">
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">1</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">2</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">3</div>
+  </div>
+  <transition-stub name=\\"var-swipe--navigation-prev-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub name=\\"var-swipe--navigation-next-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <!--v-if-->
+  </transition-stub>
+  <div class=\\"var-swipe__indicators\\">
+    <div class=\\"var-swipe__indicator var-swipe--indicator-active\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+  </div>
+</div>"
+`;
diff --git a/packages/varlet-ui/src/swipe/__tests__/index.spec.js b/packages/varlet-ui/src/swipe/__tests__/index.spec.js
index fab9a6f384e..e08e5927e52 100644
--- a/packages/varlet-ui/src/swipe/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/swipe/__tests__/index.spec.js
@@ -196,4 +196,26 @@ describe('test swipe component props', () => {
     expect(onChange).toHaveBeenCalledTimes(0)
     wrapper.unmount()
   })
+
+  test('test swipe navigation', async () => {
+    const wrapper = mount(Wrapper, {
+      props: {
+        navigation: true,
+      },
+    })
+
+    expect(wrapper.find('.var-swipe__navigation').exists()).toBe(true)
+    await wrapper.setProps({ navigation: false })
+    expect(wrapper.find('.var-swipe__navigation').exists()).toBe(false)
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ navigation: 'hover' })
+
+    await wrapper.trigger('mouseenter')
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.trigger('mouseleave')
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
 })
diff --git a/packages/varlet-ui/src/swipe/docs/en-US.md b/packages/varlet-ui/src/swipe/docs/en-US.md
index e64ff4acf51..a9516217395 100644
--- a/packages/varlet-ui/src/swipe/docs/en-US.md
+++ b/packages/varlet-ui/src/swipe/docs/en-US.md
@@ -124,6 +124,37 @@
 </style>
 ```
 
+### Navigation
+
+```html
+<template>
+  <var-swipe class="swipe-example" navigation="hover">
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat2.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat3.jpg">
+    </var-swipe-item>
+  </var-swipe>
+</template>
+
+<style>
+.swipe-example {
+  height: 160px;
+}
+
+.swipe-example-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+</style>
+```
+
 ### Handle Change
 
 ```html
@@ -239,6 +270,7 @@ import { Snackbar } from '@varlet/ui'
 | `indicator-color` | Indicator color                  | _string_           | `-`     |
 | `vertical`        | Whether to enable vertical swipe | _boolean_          | `false` |
 | `touchable`       | Whether to enable touch          | _boolean_          | `true`  |
+| `navigation` | Whether to show navigation arrows | _boolean \| string_ | `false` |
 
 ### Methods
 
@@ -268,6 +300,8 @@ import { Snackbar } from '@varlet/ui'
 | Name | Description | SlotProps |
 | --- |--------------------| --- |
 | `default`   | Swipe content           | `-`                                   |
+| `prev`   | Preview page button         | `index: number` <br> `length: number` <br> `to`、`prev`、`next`: The type is consistent with the method of the same name |
+| `next`   | Next page button         | `index: number` <br> `length: number` <br> `to`、`prev`、`next`: The type is consistent with the method of the same name |
 | `indicator` | Swipe indicator content | `index: number` <br> `length: number` <br> `to`、`prev`、`next`: The type is consistent with the method of the same name |
 
 #### SwipeItem Slots
@@ -285,3 +319,9 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--swipe-indicator-color`   | `#fff`  |
 | `--swipe-indicators-offset` | `10px`  |
 | `--swipe-indicator-offset`  | `4px`   |
+| `--swipe-navigation-button-width` | `36px` |
+| `--swipe-navigation-button-height` | `36px` |
+| `--swipe-navigation-button-border-radius` | `50%` |
+| `--swipe-navigation-icon-size` | `20px` |
+| `--swipe-navigation-prev-left` | `8px`  |  
+| `--swipe-navigation-next-right` | `8px` |
diff --git a/packages/varlet-ui/src/swipe/docs/zh-CN.md b/packages/varlet-ui/src/swipe/docs/zh-CN.md
index cb41b44c7cf..58add89a131 100644
--- a/packages/varlet-ui/src/swipe/docs/zh-CN.md
+++ b/packages/varlet-ui/src/swipe/docs/zh-CN.md
@@ -124,6 +124,37 @@
 </style>
 ```
 
+### 导航
+
+```html
+<template>
+  <var-swipe class="swipe-example" navigation="hover">
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat2.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat3.jpg">
+    </var-swipe-item>
+  </var-swipe>
+</template>
+
+<style>
+.swipe-example {
+  height: 160px;
+}
+
+.swipe-example-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+</style>
+```
+
 ### 监听切换
 
 ```html
@@ -238,6 +269,7 @@ import { Snackbar } from '@varlet/ui'
 | `indicator-color` | 指示器颜色 | _string_ | `-` |
 | `vertical` | 是否开启垂直轮播 | _boolean_ | `false` |
 | `touchable` | 是否可以拖动 | _boolean_ | `true` |
+| `navigation` | 是否显示导航箭头 | _boolean \| string_ | `false` |
 
 ### 方法
 
@@ -267,6 +299,8 @@ import { Snackbar } from '@varlet/ui'
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 轮播内容 | `-` |
+| `prev` | 上一页按钮 | `index: number` 轮播索引 <br> `length: number` 轮播总数 <br> `to`、`prev`、`next`: 类型和同名方法一致 |
+| `next` | 下一页按钮 | `index: number` 轮播索引 <br> `length: number` 轮播总数 <br> `to`、`prev`、`next`: 类型和同名方法一致 |
 | `indicator` | 指示器内容 | `index: number` 轮播索引 <br> `length: number` 轮播总数 <br> `to`、`prev`、`next`: 类型和同名方法一致 |
 
 #### SwipeItem Slots
@@ -284,3 +318,9 @@ import { Snackbar } from '@varlet/ui'
 | `--swipe-indicator-color` | `#fff` |
 | `--swipe-indicators-offset` | `10px` |
 | `--swipe-indicator-offset` | `4px` |
+| `--swipe-navigation-button-width` | `36px` |
+| `--swipe-navigation-button-height` | `36px` |
+| `--swipe-navigation-button-border-radius` | `50%` |
+| `--swipe-navigation-icon-size` | `20px` |
+| `--swipe-navigation-prev-left` | `8px`  |  
+| `--swipe-navigation-next-right` | `8px` |
diff --git a/packages/varlet-ui/src/swipe/example/index.vue b/packages/varlet-ui/src/swipe/example/index.vue
index b3ea1822507..1a08b816432 100644
--- a/packages/varlet-ui/src/swipe/example/index.vue
+++ b/packages/varlet-ui/src/swipe/example/index.vue
@@ -61,6 +61,19 @@ watchLang(use)
     </var-swipe-item>
   </var-swipe>
 
+  <app-type>{{ pack.navigation }}</app-type>
+  <var-swipe class="swipe" navigation="hover">
+    <var-swipe-item>
+      <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat.jpg" alt="" />
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat2.jpg" alt="" />
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat3.jpg" alt="" />
+    </var-swipe-item>
+  </var-swipe>
+
   <app-type>{{ pack.handleChange }}</app-type>
   <var-swipe class="swipe" @change="(index) => Snackbar(String(index))">
     <var-swipe-item>
diff --git a/packages/varlet-ui/src/swipe/example/locale/en-US.ts b/packages/varlet-ui/src/swipe/example/locale/en-US.ts
index ce45a758d8d..93344789d43 100644
--- a/packages/varlet-ui/src/swipe/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/swipe/example/locale/en-US.ts
@@ -3,6 +3,7 @@ export default {
   forbidLoop: 'Forbid Loop',
   autoplay: 'Autoplay',
   vertical: 'Vertical Swipe',
+  navigation: 'Navigation',
   handleChange: 'Handle Change',
   customIndicator: 'Custom Indicator',
 }
diff --git a/packages/varlet-ui/src/swipe/example/locale/zh-CN.ts b/packages/varlet-ui/src/swipe/example/locale/zh-CN.ts
index 8a5344435b4..53057987b5f 100644
--- a/packages/varlet-ui/src/swipe/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/swipe/example/locale/zh-CN.ts
@@ -3,6 +3,7 @@ export default {
   forbidLoop: '禁止循环轮播',
   autoplay: '开启自动播放',
   vertical: '垂直轮播',
+  navigation: '导航',
   handleChange: '监听切换',
   customIndicator: '自定义指示器',
 }
diff --git a/packages/varlet-ui/src/swipe/props.ts b/packages/varlet-ui/src/swipe/props.ts
index 25fe539077c..656afed241f 100644
--- a/packages/varlet-ui/src/swipe/props.ts
+++ b/packages/varlet-ui/src/swipe/props.ts
@@ -1,9 +1,12 @@
+import { PropType } from 'vue'
 import { defineListenerProp } from '../utils/components'
 
 export interface SwipeToOptions {
   event?: boolean
 }
 
+export type SwipeNavigation = 'hover'
+
 export const props = {
   loop: {
     type: Boolean,
@@ -18,6 +21,10 @@ export const props = {
     type: [String, Number],
     default: 0,
   },
+  navigation: {
+    type: [Boolean, String] as PropType<boolean | SwipeNavigation>,
+    default: false,
+  },
   indicator: {
     type: Boolean,
     default: true,
diff --git a/packages/varlet-ui/src/swipe/swipe.less b/packages/varlet-ui/src/swipe/swipe.less
index bfdeeb55578..1d234e33ede 100644
--- a/packages/varlet-ui/src/swipe/swipe.less
+++ b/packages/varlet-ui/src/swipe/swipe.less
@@ -2,6 +2,12 @@
   --swipe-indicator-color: #fff;
   --swipe-indicators-offset: 10px;
   --swipe-indicator-offset: 4px;
+  --swipe-navigation-button-width: 36px;
+  --swipe-navigation-button-height: 36px;
+  --swipe-navigation-button-border-radius: 50%;
+  --swipe-navigation-icon-size: 20px;
+  --swipe-navigation-prev-left: 8px;
+  --swipe-navigation-next-right: 8px;
 }
 
 .var-swipe {
@@ -17,6 +23,69 @@
     transition-property: transform;
   }
 
+  &__navigation {
+    position: absolute;
+    top: 50%;
+    z-index: 99;
+
+    &-prev {
+      left: 0;
+      transform: translate(var(--swipe-navigation-prev-left), -50%);
+
+      &-button[var-swipe-cover] {
+        width: var(--swipe-navigation-button-width);
+        height: var(--swipe-navigation-button-height);
+        border-radius: var(--swipe-navigation-button-border-radius);
+      }
+
+      &-button-icon[var-swipe-cover] {
+        font-size: var(--swipe-navigation-icon-size);
+      }
+    }
+
+    &-next {
+      right: 0;
+      transform: translate(
+        calc(100% - var(--swipe-navigation-next-right) - var(--swipe-navigation-button-width)),
+        -50%
+      );
+
+      &-button[var-swipe-cover] {
+        width: var(--swipe-navigation-button-width);
+        height: var(--swipe-navigation-button-height);
+        border-radius: var(--swipe-navigation-button-border-radius);
+      }
+
+      &-button-icon[var-swipe-cover] {
+        font-size: var(--swipe-navigation-icon-size);
+      }
+    }
+  }
+
+  &--navigation-prev-transition {
+    &-enter-active,
+    &-leave-active {
+      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+    }
+
+    &-enter-from,
+    &-leave-to {
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  &--navigation-next-transition {
+    &-enter-active,
+    &-leave-active {
+      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+    }
+
+    &-enter-from,
+    &-leave-to {
+      transform: translate(100%, -50%);
+    }
+  }
+
   &__indicators {
     position: absolute;
     display: flex;
diff --git a/packages/varlet-ui/types/swipe.d.ts b/packages/varlet-ui/types/swipe.d.ts
index 2a2fe2632f5..74bb591196d 100644
--- a/packages/varlet-ui/types/swipe.d.ts
+++ b/packages/varlet-ui/types/swipe.d.ts
@@ -7,6 +7,8 @@ export interface SwipeToOptions {
   event?: boolean
 }
 
+export type SwipeNavigation = 'hover'
+
 export interface SwipeProps extends BasicAttributes {
   loop?: boolean
   autoplay?: string | number
@@ -16,6 +18,7 @@ export interface SwipeProps extends BasicAttributes {
   indicatorColor?: string
   vertical?: boolean
   touchable?: boolean
+  navigation?: boolean | SwipeNavigation
   onChange?: ListenerProp<(index: number) => void>
 }
 
@@ -38,6 +41,8 @@ export class Swipe extends VarComponent {
 
   $slots: {
     default(): VNode[]
+    prev(data: SwipeIndicatorData): VNode[]
+    next(data: SwipeIndicatorData): VNode[]
     indicator(data: SwipeIndicatorData): VNode[]
   }