feat(n-carousel): add pause-on-hover prop

CHANGELOG.en-US.md

@@ -16,6 +16,7 @@
 - `n-progress`'s `color` prop supports gradient config.
 - `n-select` adds `font-weight` theme variable
 - `n-input` adds `font-weight` theme variable
+- `n-carousel` adds `pause-on-hover` prop, closes [#6440](https://github.com/tusen-ai/naive-ui/issues/6440)
 
 ## 2.40.1
 

CHANGELOG.zh-CN.md

@@ -16,6 +16,7 @@
 - `n-progress` 的 `color` 属性支持渐变色配置
 - `n-select` 新增 `font-weight` 主题变量
 - `n-input` 新增 `font-weight` 主题变量
+- `n-carousel` 新增 `pause-on-hover` 属性，关闭 [#6440](https://github.com/tusen-ai/naive-ui/issues/6440)
 
 ## 2.40.1
 

src/carousel/demos/enUS/index.demo-entry.md

@@ -44,6 +44,7 @@ custom-card.vue
 | loop | `boolean` | `true` | Whether to loop. | 2.24.0 |
 | mousewheel | `boolean` | `false` | Whether to switch the carousel through the mouse wheel. | 2.24.0 |
 | next-slide-style | `object \| string` | `undefined` | Next slide's style. | 2.27.0 |
+| pause-on-hover | `boolean` | `true` | Whether to pause auto play when hovering. | NEXT_VERSION |
 | prev-slide-style | `object \| string` | `undefined` | Previous slide's style. | 2.27.0 |
 | show-arrow | `boolean` | `false` | Whether to show arrow buttons. | 2.24.0 |
 | show-dots | `boolean` | `true` | Whether to show dots. | 2.24.0 |

src/carousel/demos/zhCN/index.demo-entry.md

@@ -44,6 +44,7 @@ custom-card.vue
 | loop | `boolean` | `true` | 是否循环播放 | 2.24.0 |
 | mousewheel | `boolean` | `false` | 是否通过鼠标滚轮切换轮播图 | 2.24.0 |
 | next-slide-style | `object \| string` | `undefined` | 下一张轮播图的样式 | 2.27.0 |
+| pause-on-hover | `boolean` | `true` | 是否在悬停时暂停自动播放 | NEXT_VERSION |
 | prev-slide-style | `object \| string` | `undefined` | 上一张轮播图的样式 | 2.27.0 |
 | slides-per-view | `'auto' \| number` | `1` | 每一页显示的轮播图数量 | 2.24.0 |
 | space-between | `number` | `0` | 轮播图之间的间距 | 2.24.0 |

src/carousel/src/Carousel.tsx

@@ -122,6 +122,10 @@
   transitionProps: Object as PropType<TransitionProps>,
   draggable: Boolean,
   prevSlideStyle: [Object, String] as PropType<CSSProperties | string>,
+  pauseOnHover: {
+    type: Boolean,
+    default: true
+  },
   nextSlideStyle: [Object, String] as PropType<CSSProperties | string>,
   touchable: {
     type: Boolean,
@@ -739,17 +743,17 @@
     }
     function handleSlideResize(): void {
       if (autoSlideSizeRef.value) {
         slideSizesRef.effect.scheduler?.()
         slideSizesRef.effect.run()
       }
     }
     function handleMouseenter(): void {
-      if (props.autoplay) {
+      if (props.autoplay && props.pauseOnHover) {
         stopAutoplay()
       }
     }
     function handleMouseleave(): void {
-      if (props.autoplay) {
+      if (props.autoplay && props.pauseOnHover) {
         resetAutoplay()
       }
     }