From a217301cb723c9bc1068f1221f9e92eaacc86e17 Mon Sep 17 00:00:00 2001
From: haipeng <firemmet@gmail.com>
Date: Thu, 5 May 2022 10:52:41 +0800
Subject: [PATCH] fix: Carousel compatible with vertical property (#35349)

---
 components/carousel/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index d8975a38d0..7953ee9706 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -30,7 +30,17 @@ export interface CarouselRef {
 }
 
 const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
-  ({ dots = true, arrows = false, draggable = false, dotPosition = 'bottom', ...props }, ref) => {
+  (
+    {
+      dots = true,
+      arrows = false,
+      draggable = false,
+      dotPosition = 'bottom',
+      vertical = dotPosition === 'left' || dotPosition === 'right',
+      ...props
+    },
+    ref,
+  ) => {
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const slickRef = React.useRef<any>();
 
@@ -60,6 +70,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
     }, [props.children]);
 
     const newProps = {
+      vertical,
       ...props,
     };
 
@@ -69,7 +80,6 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
 
     const prefixCls = getPrefixCls('carousel', newProps.prefixCls);
     const dotsClass = 'slick-dots';
-    newProps.vertical = dotPosition === 'left' || dotPosition === 'right';
 
     const enableDots = !!dots;
     const dsClass = classNames(
@@ -80,7 +90,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
 
     const className = classNames(prefixCls, {
       [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-vertical`]: newProps.vertical,
+      [`${prefixCls}-vertical`]: dotPosition === 'left' || dotPosition === 'right',
     });
 
     return (