@arco-design/mobile-react 2.25.3 → 2.26.0

package/esm/carousel/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle, useCallback, useMemo } from 'react';
+import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
 import { nextTick, cls } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
+import { ContextLayout, GlobalContext } from '../context-provider';
 import { useRefState, useListenResize, useUpdateEffect, getStyleWithVendor, useSystem, useSwiperInnerScroll, useLatestRef } from '../_helpers';
+
 /**
  * 轮播组件，支持自定义轮播索引样式及滑块宽度。**需要注意的是，如果正使用`fastclick`，需要为 touchstart 的 target 添加`needsclick`类**（<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick" target="_blank">详情戳这里</a>），以规避`fastclick`逻辑与组件内部的手势冲突。（如果使用了`list`属性则无需额外添加）
  * @en Carousel component, supports custom carousel index style and slider width. **Note that if you are using `fastclick`, you need to add a `needsclick` class to the touchstart target ** (<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements- with-needsclick" target="_blank">click here for details</a>) to avoid `fastclick` logic conflicts with gestures inside the component. (no need to add if `list` is set)
@@ -13,90 +14,97 @@ import { useRefState, useListenResize, useUpdateEffect, getStyleWithVendor, useS
  */
 var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-    wrapStyle = props.wrapStyle,
-    style = props.style,
-    children = props.children,
-    _props$list = props.list,
-    list = _props$list === void 0 ? [] : _props$list,
-    _props$animateDuratio = props.animateDuration,
-    animateDuration = _props$animateDuratio === void 0 ? 500 : _props$animateDuratio,
-    _props$animateDuratio2 = props.animateDurationSlide,
-    animateDurationSlide = _props$animateDuratio2 === void 0 ? 300 : _props$animateDuratio2,
-    _props$loop = props.loop,
-    loop = _props$loop === void 0 ? true : _props$loop,
-    _props$autoPlay = props.autoPlay,
-    autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
-    _props$autoPlayDirect = props.autoPlayDirection,
-    autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
-    _props$swipeable = props.swipeable,
-    swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
-    _props$stayDuration = props.stayDuration,
-    stayDuration = _props$stayDuration === void 0 ? 4000 : _props$stayDuration,
-    boxWidth = props.boxWidth,
-    boxHeight = props.boxHeight,
-    baseBoxWidth = props.baseBoxWidth,
-    baseBoxHeight = props.baseBoxHeight,
-    _props$width = props.width,
-    width = _props$width === void 0 ? 0 : _props$width,
-    height = props.height,
-    _props$initialIndex = props.initialIndex,
-    initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex,
-    renderIndicator = props.renderIndicator,
-    _props$indicatorPos = props.indicatorPos,
-    indicatorPos = _props$indicatorPos === void 0 ? 'center' : _props$indicatorPos,
-    _props$indicatorVerti = props.indicatorVerticalPos,
-    indicatorVerticalPos = _props$indicatorVerti === void 0 ? 'left' : _props$indicatorVerti,
-    indicatorOutside = props.indicatorOutside,
-    _props$showIndicator = props.showIndicator,
-    showIndicator = _props$showIndicator === void 0 ? true : _props$showIndicator,
-    _props$hideSingleIndi = props.hideSingleIndicator,
-    hideSingleIndicator = _props$hideSingleIndi === void 0 ? true : _props$hideSingleIndi,
-    _props$indicatorType = props.indicatorType,
-    indicatorType = _props$indicatorType === void 0 ? 'square' : _props$indicatorType,
-    _props$indicatorClass = props.indicatorClass,
-    indicatorClass = _props$indicatorClass === void 0 ? '' : _props$indicatorClass,
-    indicatorInverse = props.indicatorInverse,
-    _props$spaceBetween = props.spaceBetween,
-    spaceBetween = _props$spaceBetween === void 0 ? 0 : _props$spaceBetween,
-    _props$offsetBetween = props.offsetBetween,
-    offsetBetween = _props$offsetBetween === void 0 ? 0 : _props$offsetBetween,
-    currentIndex = props.currentIndex,
-    _props$autoHeight = props.autoHeight,
-    autoHeight = _props$autoHeight === void 0 ? false : _props$autoHeight,
-    _props$percentToChang = props.percentToChange,
-    percentToChange = _props$percentToChang === void 0 ? 0.3 : _props$percentToChang,
-    _props$distanceToChan = props.distanceToChange,
-    distanceToChange = _props$distanceToChan === void 0 ? 10 : _props$distanceToChan,
-    _props$speedToChange = props.speedToChange,
-    speedToChange = _props$speedToChange === void 0 ? 100 : _props$speedToChange,
-    vertical = props.vertical,
-    lazyloadCount = props.lazyloadCount,
-    _props$inactiveScale = props.inactiveScale,
-    inactiveScale = _props$inactiveScale === void 0 ? 1 : _props$inactiveScale,
-    _props$stopPropagatio = props.stopPropagation,
-    stopPropagation = _props$stopPropagatio === void 0 ? true : _props$stopPropagatio,
-    _props$fakeItem = props.fakeItem,
-    fakeItem = _props$fakeItem === void 0 ? false : _props$fakeItem,
-    _props$allowEndBlank = props.allowEndBlank,
-    allowEndBlank = _props$allowEndBlank === void 0 ? false : _props$allowEndBlank,
-    _props$bounceWhenNoLo = props.bounceWhenNoLoop,
-    bounceWhenNoLoop = _props$bounceWhenNoLo === void 0 ? false : _props$bounceWhenNoLo,
-    _props$bounceDampRate = props.bounceDampRate,
-    bounceDampRate = _props$bounceDampRate === void 0 ? 3 : _props$bounceDampRate,
-    distanceProcessor = props.distanceProcessor,
-    getInnerScrollContainer = props.getInnerScrollContainer,
-    onChange = props.onChange,
-    onAfterChange = props.onAfterChange,
-    onTouchStart = props.onTouchStart,
-    onTouchMove = props.onTouchMove,
-    onTouchEnd = props.onTouchEnd,
-    onTransitionStart = props.onTransitionStart,
-    onTransitionEnd = props.onTransitionEnd,
-    onDistanceChange = props.onDistanceChange,
-    _props$stopTouchThres = props.stopTouchThreshold,
-    stopTouchThreshold = _props$stopTouchThres === void 0 ? 0 : _props$stopTouchThres,
-    onTouchStopped = props.onTouchStopped,
-    onPageVisibleChange = props.onPageVisibleChange;
+      wrapStyle = props.wrapStyle,
+      style = props.style,
+      children = props.children,
+      _props$list = props.list,
+      list = _props$list === void 0 ? [] : _props$list,
+      _props$animateDuratio = props.animateDuration,
+      animateDuration = _props$animateDuratio === void 0 ? 500 : _props$animateDuratio,
+      _props$animateDuratio2 = props.animateDurationSlide,
+      animateDurationSlide = _props$animateDuratio2 === void 0 ? 300 : _props$animateDuratio2,
+      _props$loop = props.loop,
+      loop = _props$loop === void 0 ? true : _props$loop,
+      _props$autoPlay = props.autoPlay,
+      autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
+      _props$autoPlayDirect = props.autoPlayDirection,
+      autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
+      _props$swipeable = props.swipeable,
+      swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
+      _props$stayDuration = props.stayDuration,
+      stayDuration = _props$stayDuration === void 0 ? 4000 : _props$stayDuration,
+      boxWidth = props.boxWidth,
+      boxHeight = props.boxHeight,
+      baseBoxWidth = props.baseBoxWidth,
+      baseBoxHeight = props.baseBoxHeight,
+      _props$width = props.width,
+      width = _props$width === void 0 ? 0 : _props$width,
+      height = props.height,
+      _props$initialIndex = props.initialIndex,
+      initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex,
+      renderIndicator = props.renderIndicator,
+      _props$indicatorPos = props.indicatorPos,
+      indicatorPos = _props$indicatorPos === void 0 ? 'center' : _props$indicatorPos,
+      _props$indicatorVerti = props.indicatorVerticalPos,
+      indicatorVerticalPos = _props$indicatorVerti === void 0 ? 'left' : _props$indicatorVerti,
+      indicatorOutside = props.indicatorOutside,
+      _props$showIndicator = props.showIndicator,
+      showIndicator = _props$showIndicator === void 0 ? true : _props$showIndicator,
+      _props$hideSingleIndi = props.hideSingleIndicator,
+      hideSingleIndicator = _props$hideSingleIndi === void 0 ? true : _props$hideSingleIndi,
+      _props$indicatorType = props.indicatorType,
+      indicatorType = _props$indicatorType === void 0 ? 'square' : _props$indicatorType,
+      _props$indicatorClass = props.indicatorClass,
+      indicatorClass = _props$indicatorClass === void 0 ? '' : _props$indicatorClass,
+      indicatorInverse = props.indicatorInverse,
+      _props$spaceBetween = props.spaceBetween,
+      spaceBetween = _props$spaceBetween === void 0 ? 0 : _props$spaceBetween,
+      _props$offsetBetween = props.offsetBetween,
+      offsetBetween = _props$offsetBetween === void 0 ? 0 : _props$offsetBetween,
+      currentIndex = props.currentIndex,
+      _props$autoHeight = props.autoHeight,
+      autoHeight = _props$autoHeight === void 0 ? false : _props$autoHeight,
+      _props$percentToChang = props.percentToChange,
+      percentToChange = _props$percentToChang === void 0 ? 0.3 : _props$percentToChang,
+      _props$distanceToChan = props.distanceToChange,
+      distanceToChange = _props$distanceToChan === void 0 ? 10 : _props$distanceToChan,
+      _props$speedToChange = props.speedToChange,
+      speedToChange = _props$speedToChange === void 0 ? 100 : _props$speedToChange,
+      vertical = props.vertical,
+      lazyloadCount = props.lazyloadCount,
+      _props$inactiveScale = props.inactiveScale,
+      inactiveScale = _props$inactiveScale === void 0 ? 1 : _props$inactiveScale,
+      _props$stopPropagatio = props.stopPropagation,
+      stopPropagation = _props$stopPropagatio === void 0 ? true : _props$stopPropagatio,
+      _props$fakeItem = props.fakeItem,
+      fakeItem = _props$fakeItem === void 0 ? false : _props$fakeItem,
+      _props$allowEndBlank = props.allowEndBlank,
+      allowEndBlank = _props$allowEndBlank === void 0 ? false : _props$allowEndBlank,
+      _props$bounceWhenNoLo = props.bounceWhenNoLoop,
+      bounceWhenNoLoop = _props$bounceWhenNoLo === void 0 ? false : _props$bounceWhenNoLo,
+      _props$bounceDampRate = props.bounceDampRate,
+      bounceDampRate = _props$bounceDampRate === void 0 ? 3 : _props$bounceDampRate,
+      _props$iOSVisibleOpti = props.iOSVisibleOptimize,
+      iOSVisibleOptimize = _props$iOSVisibleOpti === void 0 ? true : _props$iOSVisibleOpti,
+      distanceProcessor = props.distanceProcessor,
+      getInnerScrollContainer = props.getInnerScrollContainer,
+      onChange = props.onChange,
+      onAfterChange = props.onAfterChange,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      onTransitionStart = props.onTransitionStart,
+      onTransitionEnd = props.onTransitionEnd,
+      onDistanceChange = props.onDistanceChange,
+      _props$stopTouchThres = props.stopTouchThreshold,
+      stopTouchThreshold = _props$stopTouchThres === void 0 ? 0 : _props$stopTouchThres,
+      onTouchStopped = props.onTouchStopped,
+      onPageVisibleChange = props.onPageVisibleChange;
+
+  var _useContext = useContext(GlobalContext),
+      useRtl = _useContext.useRtl;
+
+  var horizontalUseRtl = !vertical && useRtl;
   var domRef = useRef(null);
   var wrapRef = useRef(null);
   var innerRef = useRef(null);
@@ -107,57 +115,75 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
   var touchStartTimeRef = useRef(0);
   var touchStartedRef = useRef(false);
   var touchMovedRef = useRef(false);
+
   var _useState = useState(baseBoxWidth || 0),
-    wrapWidth = _useState[0],
-    setWrapWidth = _useState[1];
+      wrapWidth = _useState[0],
+      setWrapWidth = _useState[1];
+
   var _useState2 = useState(baseBoxHeight || 0),
-    wrapHeight = _useState2[0],
-    setWrapHeight = _useState2[1];
+      wrapHeight = _useState2[0],
+      setWrapHeight = _useState2[1];
+
   var touchStartXRef = useRef(0);
   var touchStartYRef = useRef(0);
   var scrollingRef = useRef(null);
   var touchStoppedRef = useRef(false);
   var bouncingRef = useRef(false);
+
   var _useState3 = useState('auto'),
-    currentItemHeight = _useState3[0],
-    setCurrentItemHeight = _useState3[1];
+      currentItemHeight = _useState3[0],
+      setCurrentItemHeight = _useState3[1];
+
   var _useRefState = useRefState(false),
-    posAdjusting = _useRefState[0],
-    posAdjustingRef = _useRefState[1],
-    setPosAdjusting = _useRefState[2];
+      posAdjusting = _useRefState[0],
+      posAdjustingRef = _useRefState[1],
+      setPosAdjusting = _useRefState[2];
+
   var _useRefState2 = useRefState(0),
-    distance = _useRefState2[0],
-    distanceRef = _useRefState2[1],
-    setDistance = _useRefState2[2];
+      distance = _useRefState2[0],
+      distanceRef = _useRefState2[1],
+      setDistance = _useRefState2[2];
+
   var _useState4 = useState(true),
-    isAutoJump = _useState4[0],
-    setIsAutoJump = _useState4[1];
+      isAutoJump = _useState4[0],
+      setIsAutoJump = _useState4[1];
+
   var _useRefState3 = useRefState(currentIndex !== void 0 ? currentIndex : initialIndex),
-    index = _useRefState3[0],
-    indexRef = _useRefState3[1],
-    setIndex = _useRefState3[2];
+      index = _useRefState3[0],
+      indexRef = _useRefState3[1],
+      setIndex = _useRefState3[2];
+
   var _useRefState4 = useRefState([]),
-    transforms = _useRefState4[0],
-    transformsRef = _useRefState4[1],
-    setTransforms = _useRefState4[2];
-  var _useRefState5 = useRefState(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
-    direction = _useRefState5[0],
-    directionRef = _useRefState5[1],
-    setStateDirection = _useRefState5[2];
+      transforms = _useRefState4[0],
+      transformsRef = _useRefState4[1],
+      setTransforms = _useRefState4[2];
+
+  var _useRefState5 = useRefState((autoPlayDirection === 'reverse' || horizontalUseRtl) && autoPlay ? 'right' : 'left'),
+      direction = _useRefState5[0],
+      directionRef = _useRefState5[1],
+      setStateDirection = _useRefState5[2];
+
   var lastDirectionRef = useRef('');
   var lastShownIndexRef = useRef(-1);
+
   var _getAllChildren = getAllChildren(),
-    allChildren = _getAllChildren.allChildren,
-    fakeTwoChildren = _getAllChildren.fakeTwoChildren;
+      allChildren = _getAllChildren.allChildren,
+      fakeTwoChildren = _getAllChildren.fakeTwoChildren;
+
   var total = allChildren.length;
   var shownTotal = fakeTwoChildren ? 2 : total;
   var indicatorArr = useMemo(function () {
     var arr = [];
+
     for (var i = 0; i < shownTotal; i += 1) {
       arr.push(i);
     }
+
     return arr;
   }, [shownTotal]);
+  var rtlRatio = horizontalUseRtl ? -1 : 1;
+  var leftDirec = horizontalUseRtl ? 'right' : 'left';
+  var rightDirec = horizontalUseRtl ? 'left' : 'right';
   var leftOffset = typeof offsetBetween === 'number' ? offsetBetween : offsetBetween.left || 0;
   var rightOffset = typeof offsetBetween === 'number' ? offsetBetween : offsetBetween.right || 0;
   var wrapSize = vertical ? wrapHeight : wrapWidth;
@@ -176,13 +202,15 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
   var inactiveValidScale = useMemo(function () {
     return Math.max(0, Math.min(inactiveScale, 1));
   }, [inactiveScale]);
+
   var _useState5 = useState([]),
-    fakeIndexes = _useState5[0],
-    setFakeIndexes = _useState5[1];
-  var system = useSystem();
-  // 开启自动循环时iOS会有渲染问题需要强刷dom，但不需要autoPlay的不用强刷，这里判断下
+      fakeIndexes = _useState5[0],
+      setFakeIndexes = _useState5[1];
+
+  var system = useSystem(); // 开启自动循环时iOS会有渲染问题需要强刷dom，但不需要autoPlay的不用强刷，这里判断下
   // @en When the automatic loop is turned on, there will be rendering problems in iOS. Need to brush the dom, but if you don't need autoPlay, don't need to brush.
-  var needRefreshDom = !noInterval && system === 'ios';
+
+  var needRefreshDom = !noInterval && system === 'ios' && iOSVisibleOptimize;
   var setDirection = useCallback(function (newDirec) {
     setStateDirection(function (direc) {
       lastDirectionRef.current = direc;
@@ -196,9 +224,11 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onTouchStart && onTouchStart(e, shownTotal, getShownIndex(indexRef.current))) {
       return;
     }
+
     if (posAdjustingRef.current) {
       return;
     }
+
     touchStartedRef.current = true;
     touchMovedRef.current = false;
     clear();
@@ -212,20 +242,25 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [shownTotal, onTouchStart]);
   var triggerTouchStopped = useCallback(function (posDis) {
     var needStop = Math.abs(posDis) > stopTouchThreshold;
+
     if (!touchStoppedRef.current && needStop) {
       onTouchStopped && onTouchStopped(posDis >= 0 ? -1 : 1);
     }
+
     touchStoppedRef.current = needStop;
   }, [stopTouchThreshold, onTouchStopped]);
   var handleTouchMove = useCallback(function (e) {
     if (onTouchMove && onTouchMove(e, shownTotal, getShownIndex(indexRef.current))) {
       return;
     }
+
     stopPropagation && e.stopPropagation();
+
     if (!touchStartedRef.current || posAdjustingRef.current) {
       e.cancelable && e.preventDefault();
       return;
     }
+
     touchMovedRef.current = true;
     var evt = e.changedTouches[0];
     var touchMoveX = Math.max(0, evt.clientX || 0);
@@ -235,32 +270,41 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     var absDisX = Math.abs(posDisX);
     var absDisY = Math.abs(posDisY);
     var originDis = vertical ? posDisY : posDisX;
+
     var processor = distanceProcessor || function (dis, size, child) {
       return child * (dis / size);
     };
+
     var posDis = processor(originDis, wrapSizeRef.current, childSize);
+
     if (total < 2) {
       triggerTouchStopped(posDis);
       return;
     }
+
     if (scrollingRef.current === null) {
       scrollingRef.current = vertical ? absDisY < absDisX : absDisX < absDisY;
-    }
-    // 如果是在滚动页面则禁用轮播图手势
+    } // 如果是在滚动页面则禁用轮播图手势
     // @en Disable carousel gestures if scrolling
+
+
     if (scrollingRef.current) {
-      setDistance(0);
-      // bugfix: 未触发横滑就不触发touchend逻辑，且这个场景不需要触发onTouchStopped，因此直接设置touchStoppedRef
+      setDistance(0); // bugfix: 未触发横滑就不触发touchend逻辑，且这个场景不需要触发onTouchStopped，因此直接设置touchStoppedRef
       // @en bugfix: The touchend event will not be triggered if the horizontal swipe is not triggered, and this scene does not need to trigger onTouchStopped.
-      touchStoppedRef.current = true;
-      // 不会触发jumpTo，但touchstart时clear了，所以要手动设置一次interval
+
+      touchStoppedRef.current = true; // 不会触发jumpTo，但touchstart时clear了，所以要手动设置一次interval
       // @en JumpTo will not be triggered, but it is cleared in touchstart event, so need to manually set interval once
+
       setPlayIntervalRef.current();
       return;
     }
+
     setDirection(posDis >= 0 ? 'right' : 'left');
-    if (noLoop && (indexRef.current === 0 && posDis > 0 || indexRef.current === total - 1 && posDis < 0)) {
+    var comparedPos = posDis * rtlRatio;
+
+    if (noLoop && (indexRef.current === 0 && comparedPos > 0 || indexRef.current === total - 1 && comparedPos < 0)) {
       triggerTouchStopped(posDis);
+
       if (bounceWhenNoLoop && bounceDampRate) {
         e.cancelable && e.preventDefault();
         bouncingRef.current = true;
@@ -268,13 +312,15 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       } else {
         setDistance(0);
       }
+
       return;
     }
+
     e.cancelable && e.preventDefault();
     touchStoppedRef.current = false;
     var maxDis = childSize;
     setDistance(posDis > 0 ? Math.min(maxDis, posDis) : Math.max(-1 * maxDis, posDis));
-  }, [shownTotal, noLoop, vertical, childSize, stopPropagation, bounceWhenNoLoop, bounceDampRate, onTouchMove, triggerTouchStopped]);
+  }, [shownTotal, noLoop, vertical, childSize, stopPropagation, bounceWhenNoLoop, bounceDampRate, horizontalUseRtl, onTouchMove, triggerTouchStopped]);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -289,13 +335,14 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
   useSwiperInnerScroll(getInnerScrollContainer);
   var updateWhenVisible = useCallback(function () {
     fakeWrapRef.current && (fakeWrapRef.current.style.display = 'none');
-    wrapRef.current && (wrapRef.current.style.display = '');
-    // 部分情况下页面隐藏后容器宽度变成0，因此页面返回后需重新取一次容器尺寸
+    wrapRef.current && (wrapRef.current.style.display = ''); // 部分情况下页面隐藏后容器宽度变成0，因此页面返回后需重新取一次容器尺寸
     // @en In some cases, the width of the container becomes 0 after the page is invisible, so the container size needs to be resized after the page is visible.
+
     updateDataRef.current();
   }, []);
   var updateWhenInvisible = useCallback(function () {
     clear();
+
     if (wrapRef.current && fakeWrapRef.current) {
       fakeWrapRef.current.style.height = (wrapRef.current.offsetHeight || 0) + "px";
       fakeWrapRef.current.style.display = 'block';
@@ -305,9 +352,10 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     if (onPageVisibleChange) {
       return onPageVisibleChange(updateWhenVisible, updateWhenInvisible);
-    }
-    // ios 在页面隐藏后返回时会有dom结构正确但渲染错乱的情况，因此在页面隐藏时先用占位符，返回后重新渲染一次dom
+    } // ios 在页面隐藏后返回时会有dom结构正确但渲染错乱的情况，因此在页面隐藏时先用占位符，返回后重新渲染一次dom
     // @en In iOS, When the page is invisible, the DOM will be correct but the rendering is disordered. So use a placeholder when the page is invisible, and re-render the DOM after it is visible.
+
+
     var update = function update() {
       if (document.visibilityState === 'visible') {
         updateWhenVisible();
@@ -315,6 +363,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
         updateWhenInvisible();
       }
     };
+
     document.addEventListener('visibilitychange', update);
     return function () {
       document.removeEventListener('visibilitychange', update);
@@ -335,6 +384,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       wrapRef.current.addEventListener('touchstart', handleTouchStart);
       wrapRef.current.addEventListener('touchmove', handleTouchMove);
     }
+
     return function () {
       if (wrapRef.current && needTouchEvent) {
         wrapRef.current.removeEventListener('touchstart', handleTouchStart);
@@ -377,7 +427,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       getFakeChild();
     }
-  }, [index, direction, childSize, total]);
+  }, [index, direction, childSize, total, horizontalUseRtl]);
   useEffect(function () {
     nextTick(function () {
       updateLayoutData();
@@ -397,34 +447,43 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!fakeItem || posAdjusting) {
       return;
     }
+
     setCurrentFakeIndex();
-  }, [posAdjusting, index, direction, total, childSize]);
+  }, [posAdjusting, index, direction, total, childSize, horizontalUseRtl]);
+
   function getShownIndex(nowIndex) {
     var validIndex = nowIndex === total ? 0 : nowIndex;
     var shownInd = nowIndex === -1 ? total - 1 : validIndex;
     return fakeTwoChildren ? shownInd % 2 : shownInd;
   }
+
   function getDynamicDuration(autoJump) {
     return autoJump ? animateDuration : animateDurationSlide;
   }
+
   function setCurrentHeight() {
     if (!innerRef.current || !autoHeight || vertical) {
       return;
     }
+
     var allItemDom = itemsRef.current;
     var nowIndex = getShownIndex(indexRef.current);
     var currentHeight = (allItemDom[nowIndex] || {}).offsetHeight || 'auto';
     setCurrentItemHeight(currentHeight);
   }
+
   function getAllChildren() {
     var allChild = [];
     var fakeTwo = false;
+
     if (list && list.length) {
       var actualList = list;
+
       if (list.length === 2 && fakeItem) {
         fakeTwo = true;
         actualList = list.concat(list);
       }
+
       allChild = actualList.map(function (item, i) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
           key: i,
@@ -438,6 +497,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     } else if (children && Object.prototype.toString.call(children) === '[object Array]') {
       allChild = children;
+
       if (allChild.length === 2 && fakeItem) {
         fakeTwo = true;
         allChild = [].concat(allChild, allChild);
@@ -445,26 +505,39 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       allChild = children ? [children] : [];
     }
+
     return {
       allChildren: allChild,
       fakeTwoChildren: fakeTwo
     };
   }
+
   function getDefaultDirection() {
     var nowIndex = indexRef.current;
+
     if (nowIndex === total - 1) {
-      return 'left';
+      return horizontalUseRtl ? 'right' : 'left';
     }
+
     if (nowIndex === 0) {
-      return 'right';
+      return horizontalUseRtl ? 'left' : 'right';
     }
+
     return '';
   }
-  function changeIndex(newIndex, rightNow, direc) {
+
+  function changeIndex(newIndex, rightNow, userSetDirec) {
     if (posAdjustingRef.current) {
       return;
     }
-    if (direc) {
+
+    if (userSetDirec) {
+      // rtl 模式取反
+      var direcMap = {
+        left: leftDirec,
+        right: rightDirec
+      };
+      var direc = direcMap[userSetDirec];
       setDirection(direc);
       nextTick(function () {
         jumpTo(newIndex, true, rightNow, direc);
@@ -473,21 +546,25 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       jumpTo(newIndex, true, rightNow);
     }
   }
+
   function jumpTo(newIndex, autoJump, rightNow, direc) {
     if (autoJump === void 0) {
       autoJump = true;
     }
+
     var oldIndex = getShownIndex(indexRef.current);
     var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
+
     if (direc) {
       setDirection(direc);
     } else if (autoJump) {
-      setDirection(autoPlayDirection === 'reverse' ? 'right' : 'left');
+      setDirection(autoPlayDirection === 'reverse' || horizontalUseRtl ? 'right' : 'left');
     } else if (newIndex === indexRef.current) {
       setDirection(distanceRef.current > 0 ? 'right' : 'left');
     } else {
       setDirection('');
     }
+
     setPosAdjusting(true);
     setIsAutoJump(autoJump);
     setDistance(0);
@@ -500,6 +577,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
         setDirection(getDefaultDirection());
         var newTransform = transformsRef.current.slice();
         var transChanged = false;
+
         if (newIndex === -1 && movedChildRef.current >= 0) {
           newTransform[movedChildRef.current] = 0;
           transChanged = true;
@@ -509,12 +587,15 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
           transChanged = true;
           setIndex(0);
         }
+
         transChanged && setTransforms(newTransform);
         setIsAutoJump(true);
         onTransitionEnd && onTransitionEnd();
+
         if (changedIndex >= 0) {
           onAfterChange && onAfterChange(changedIndex, oldIndex);
         }
+
         nextTick(function () {
           setPlayIntervalRef.current();
         });
@@ -522,111 +603,137 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     }, rightNow ? 0 : getDynamicDuration(autoJump));
     autoJump && setDirection('');
   }
+
   function setPlayInterval() {
     clear();
+
     if (noInterval) {
       return;
     }
+
     timerRef.current = delayTimeout(function () {
       jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
     }, stayDuration);
   }
+
   function updateLayoutData() {
     if (wrapRef.current) {
       setWrapWidth(wrapRef.current.offsetWidth);
       setWrapHeight(wrapRef.current.offsetHeight);
     }
+
     setCurrentHeight();
   }
+
   function updateData() {
     updateLayoutData();
     setPlayIntervalRef.current();
   }
+
   function clear() {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }
+
   function getFakeChild() {
     if (noLoop) {
       return;
     }
+
     var nowIndex = indexRef.current;
     var newTransform = transformsRef.current.slice();
     var dis = Math.max(0, childSize);
     allChildren.forEach(function (_, childIndex) {
-      if (nowIndex === 0 && directionRef.current === 'right' && childIndex === total - 1) {
+      if (nowIndex === 0 && directionRef.current === rightDirec && childIndex === total - 1) {
         movedChildRef.current = childIndex;
-        newTransform[childIndex] = -1 * total * dis;
-      } else if (nowIndex === total - 1 && directionRef.current === 'left' && childIndex === 0) {
+        newTransform[childIndex] = -1 * total * dis * rtlRatio;
+      } else if (nowIndex === total - 1 && directionRef.current === leftDirec && childIndex === 0) {
         movedChildRef.current = childIndex;
-        newTransform[childIndex] = total * dis;
+        newTransform[childIndex] = total * dis * rtlRatio;
       } else if (nowIndex >= 0 && nowIndex < total) {
         newTransform[childIndex] = 0;
       }
     });
     setTransforms(newTransform);
   }
+
   function delayTimeout(callback, timeout) {
     return setTimeout(callback, timeout);
   }
+
   function handleTouchEnd(e) {
     if (!needTouchEvent) {
       return;
     }
+
     if (onTouchEnd && onTouchEnd(e.nativeEvent, shownTotal, getShownIndex(indexRef.current))) {
       return;
     }
+
     stopPropagation && e.stopPropagation();
+
     if (bouncingRef.current) {
       bouncingRef.current = false;
       jumpTo(index, false);
       return;
     }
+
     if (!touchStartedRef.current || !touchMovedRef.current || posAdjustingRef.current || touchStoppedRef.current) {
       return;
     }
+
     touchStartedRef.current = false;
     touchMovedRef.current = false;
     var touchEndTime = new Date().getTime();
-    var speed = distance / (touchEndTime - touchStartTimeRef.current) * 1000;
-    var maxSlice = childSize * percentToChange;
     var dis = Math.abs(distance);
-    var needJump = dis > maxSlice && dis > distanceToChange || Math.abs(speed) > speedToChange;
-    if (distance > 0 && needJump) {
+    var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;
+    var maxSlice = childSize * percentToChange;
+    var needJump = dis > maxSlice && dis > distanceToChange || speed > speedToChange;
+    var comparedDis = distance * rtlRatio;
+
+    if (comparedDis > 0 && needJump) {
       jumpTo(index - 1, false);
-    } else if (distance < 0 && needJump) {
+    } else if (comparedDis < 0 && needJump) {
       jumpTo(index + 1, false);
     } else {
       jumpTo(index, false);
     }
   }
+
   function getSlideTransitionStyle() {
     return {
       transitionProperty: posAdjusting ? 'transform' : 'none',
       transitionDuration: posAdjusting ? dynamicAnimateDuration + "ms" : '0ms'
     };
   }
+
   function getInnerStyle() {
     var transitionStyle = getStyleWithVendor(getSlideTransitionStyle());
     var innerSize = childSize * total;
-    var dis = index * childSize * -1 + distance + leftOffset;
-    var minTransform = childSize > 0 ? leftOffset : 0;
-    var maxTransform = allowEndBlank ? dis : -1 * innerSize + wrapSize - rightOffset;
-    var noLoopDis = bounceWhenNoLoop && (index === 0 && distance > 0 || index === total - 1 && distance < 0) ? Math.min(minTransform + distance, Math.max(maxTransform + distance, dis)) : Math.min(minTransform, Math.max(maxTransform, dis));
-    // noLoop时需要在最后也露出spaceBetween的空白，所以当滑到最后一个时transform向左移动相应宽度
+    var dis = index * childSize * -1 * rtlRatio + distance + rtlRatio * leftOffset;
+    var min = childSize > 0 ? leftOffset : 0;
+    var max = allowEndBlank ? dis * rtlRatio : -1 * innerSize + wrapSize - rightOffset;
+    var minTransform = horizontalUseRtl ? -1 * max : min;
+    var maxTransform = horizontalUseRtl ? -1 * min : max;
+    var comparedDis = rtlRatio * distance;
+    var noLoopDis = bounceWhenNoLoop && (index === 0 && comparedDis > 0 || index === total - 1 && comparedDis < 0) ? Math.min(minTransform + distance, Math.max(maxTransform + distance, dis)) : Math.min(minTransform, Math.max(maxTransform, dis)); // noLoop时需要在最后也露出spaceBetween的空白，所以当滑到最后一个时transform向左移动相应宽度
     // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
-    var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) : dis;
+
+    var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) * rtlRatio : dis;
     var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+
     if (vertical) {
       var _translateStyle = getStyleWithVendor({
         transform: "translateY(" + transStr + ") translateZ(0)"
       });
+
       return _extends({}, transitionStyle, _translateStyle, {
         width: '100%'
       });
     }
+
     var translateStyle = getStyleWithVendor({
       transform: "translateX(" + transStr + ") translateZ(0)"
     });
@@ -635,36 +742,41 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       height: height
     }, transitionStyle, translateStyle);
   }
+
   function getCarouselStyle() {
     if (vertical) {
       return _extends({
         height: userSetBoxHeight
       }, style || {});
     }
+
     var heightStyle = currentItemHeight && currentItemHeight !== 'auto' ? {
       height: currentItemHeight
     } : {};
     return _extends({
       width: userSetBoxWidth
     }, heightStyle, style || {});
-  }
-
-  // 当最前或最后的滑块通过transform手动被放置到最后或最前时，在展示层可以认为是第total个或第-1个模块
+  } // 当最前或最后的滑块通过transform手动被放置到最后或最前时，在展示层可以认为是第total个或第-1个模块
   // @en When the front or last slider is manually placed to the rear or the front through transform, it can be considered as the total or -1 module in the display layer
+
+
   function getShownChildIndex(curIndex) {
     var childIndex = curIndex;
-    if (transforms[childIndex] > 0) {
+
+    if (transforms[childIndex] * rtlRatio > 0) {
       childIndex = total;
-    } else if (transforms[childIndex] < 0) {
+    } else if (transforms[childIndex] * rtlRatio < 0) {
       childIndex = -1;
     }
-    return childIndex;
-  }
 
-  // 当两侧有露出内容时，为了循环衔接上需要fake前后的dom来做视觉填充
+    return childIndex;
+  } // 当两侧有露出内容时，为了循环衔接上需要fake前后的dom来做视觉填充
   // @en When there is exposed content on both sides, it is necessary to fake the front and rear dom to make visual filling in order to connect circularly.
+
+
   function setCurrentFakeIndex() {
     var newIndexes = fakeIndexes.slice();
+
     if (childSize <= 0) {
       if (index === 0) {
         newIndexes[0] = {
@@ -672,72 +784,88 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
           side: 'left'
         };
       }
+
       if (index === total - 1) {
         newIndexes[2] = {
           index: 0,
           side: 'right'
         };
       }
+
       setFakeIndexes(newIndexes);
       return;
     }
-    if (index === 1 && direction === 'right' || index === 0 && direction !== 'right') {
+
+    if (index === 1 && direction === rightDirec || index === 0 && direction !== rightDirec) {
       newIndexes[0] = {
         index: total - 1,
         side: 'left'
       };
     }
-    if (index === 0 && direction === 'right' || index === -1) {
+
+    if (index === 0 && direction === rightDirec || index === -1) {
       newIndexes[1] = {
         index: total - 2,
         side: 'left'
       };
     }
-    if (index === total - 2 && direction === 'left' || index === total - 1 && direction !== 'left') {
+
+    if (index === total - 2 && direction === leftDirec || index === total - 1 && direction !== leftDirec) {
       newIndexes[2] = {
         index: 0,
         side: 'right'
       };
     }
-    if (index === total - 1 && direction === 'left' || index === total) {
+
+    if (index === total - 1 && direction === leftDirec || index === total) {
       newIndexes[3] = {
         index: 1,
         side: 'right'
       };
     }
+
     setFakeIndexes(newIndexes);
   }
+
   function getItemTranslateStyle(childIndex, ratio) {
     var dis = index - childIndex;
     var prefix = dis > 0 ? 1 : -1;
     var transPercent = 1 - inactiveValidScale;
+    var ratioWithRtl = ratio * rtlRatio;
     var trans = 0;
+
     if (Math.abs(dis) > 1) {
-      trans = (prefix * (Math.abs(dis) - 1) - ratio) * transPercent;
-    } else if (dis === -1 && ratio > 0 || dis === 1 && ratio < 0) {
+      trans = (prefix * (Math.abs(dis) - 1) - ratioWithRtl) * transPercent * rtlRatio;
+    } else if (dis === -1 && ratioWithRtl > 0 || dis === 1 && ratioWithRtl < 0) {
       trans = -1 * ratio * transPercent;
     }
+
     return "translate" + (vertical ? 'Y' : 'X') + "(" + trans * 100 + "%)";
   }
+
   function getItemScaleStyle(childIndex, ratio) {
-    var originScale = inactiveValidScale;
-    // active滑块前后两侧的滑块，根据滑动距离等比放大
+    var originScale = inactiveValidScale; // active滑块前后两侧的滑块，根据滑动距离等比放大
     // @en The front and rear sides of the active slider, and zoom in proportionally according to the sliding distance
-    if (childIndex === index - 1 && direction === 'right' || childIndex === index + 1 && direction === 'left') {
+
+    if (childIndex === index - 1 && direction === rightDirec || childIndex === index + 1 && direction === leftDirec) {
       return originScale + (1 - originScale) * Math.abs(ratio);
-    }
-    // active的滑块，根据滑动距离等比缩小
+    } // active的滑块，根据滑动距离等比缩小
     // @en The active slider, zoom out proportionally according to the sliding distance
+
+
     if (childIndex === index) {
       return 1 - (1 - originScale) * Math.abs(ratio);
-    }
-    // 其他保持inactiveScale即可
+    } // 其他保持inactiveScale即可
     // @en Others remain inactiveScale
+
+
     return originScale;
   }
+
   function getItemOriginStyle(childIndex) {
     var origin = 0.5;
     var dis = childIndex - index;
+
     if (dis === 0) {
       // 当前active的卡片，随滑动方向切换origin
       // @en The currently active card, switch origin with the sliding direction
@@ -745,25 +873,27 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     } else if (dis <= -1) {
       // 当前active之前的卡片，origin均靠最右
       // @en The cards in front of the currently active card, the origin is on the far right
-      origin = 1;
+      origin = horizontalUseRtl ? 0 : 1;
     } else if (dis >= 1) {
       // 当前active之后的卡片，origin均靠最左
       // @en The cards after the currently active card, the origin is on the far left
-      origin = 0;
+      origin = horizontalUseRtl ? 1 : 0;
     }
+
     var originStr = origin * 100 + "%";
     return vertical ? "center " + originStr : originStr + " center";
   }
+
   function getItemInnerStyle(curIndex) {
     var transitionStyle = getSlideTransitionStyle();
     var childIndex = getShownChildIndex(curIndex);
-    var ratio = distance / childSize || 0;
-    // 有放大效果的item，随着distance变化而变化scale和transform-origin
+    var ratio = distance / childSize || 0; // 有放大效果的item，随着distance变化而变化scale和transform-origin
     // @en Item with magnification effect, scale and transform-origin change with distance
     // transform效果与fake dom时item的transform需隔离，且scale后会影响item的padding展示
     // @en The transform effect of the item needs to be isolated from the fake dom, and the padding display of the item will be affected after scale.
     // 因此需要缩放时多包裹一层item-inner，单独处理缩放逻辑
     // @en Therefore, need to wrap an additional layer of item-inner when scaling, and handle the scaling logic separately
+
     var scale = getItemScaleStyle(childIndex, ratio);
     var transformStyle = {
       transform: getItemTranslateStyle(childIndex, ratio) + " scale(" + scale + ")",
@@ -771,45 +901,54 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     };
     return getStyleWithVendor(_extends({}, transitionStyle, transformStyle));
   }
+
   function getItemFakeStyle(childIndex) {
     var _extends2, _ref, _ref2;
+
     var styleMap = {
-      leftDirec: vertical ? 'bottom' : 'right',
-      rightDirec: vertical ? 'top' : 'left',
+      leftDirec: vertical ? 'top' : leftDirec,
+      rightDirec: vertical ? 'bottom' : rightDirec,
       otherDirec: vertical ? 'left' : 'top',
       trans: vertical ? 'Y' : 'X'
     };
     return _extends((_extends2 = {
       position: 'absolute'
-    }, _extends2[styleMap.otherDirec] = 0, _extends2), childIndex >= 0 ? (_ref = {}, _ref[styleMap.rightDirec] = childSize > 0 ? '100%' : total * 100 + "%", _ref.transform = "translate" + styleMap.trans + "(" + (childIndex - total) * 100 + "%)", _ref) : (_ref2 = {}, _ref2[styleMap.leftDirec] = '100%', _ref2.transform = "translate" + styleMap.trans + "(" + (childIndex + 1) * 100 + "%)", _ref2));
+    }, _extends2[styleMap.otherDirec] = 0, _extends2), childIndex >= 0 ? (_ref = {}, _ref[styleMap.leftDirec] = childSize > 0 ? '100%' : total * 100 + "%", _ref.transform = "translate" + styleMap.trans + "(" + (childIndex - total) * rtlRatio * 100 + "%)", _ref) : (_ref2 = {}, _ref2[styleMap.rightDirec] = '100%', _ref2.transform = "translate" + styleMap.trans + "(" + (childIndex + 1) * rtlRatio * 100 + "%)", _ref2));
   }
+
   function getItemStyle(childIndex, isFake) {
     var _ref3, _ref4;
+
     var initialStartSpace = spaceBetween + leftOffset;
     var initialEndSpace = spaceBetween + rightOffset;
     var initalSize = vertical ? userSetBoxHeight : '100%';
+    var horizontalPaddingStart = horizontalUseRtl ? 'paddingRight' : 'paddingLeft';
+    var horizontalPaddingEnd = horizontalUseRtl ? 'paddingLeft' : 'paddingRight';
     var styleMap = {
       size: vertical ? 'height' : 'width',
-      paddingStart: vertical ? 'paddingTop' : 'paddingLeft',
-      paddingEnd: vertical ? 'paddingBottom' : 'paddingRight',
+      paddingStart: vertical ? 'paddingTop' : horizontalPaddingStart,
+      paddingEnd: vertical ? 'paddingBottom' : horizontalPaddingEnd,
       translate: vertical ? 'translateY' : 'translateX'
-    };
-    // bugfix: item 为半透明状态下 fakeItem 和普通 item 重叠露馅问题
+    }; // bugfix: item 为半透明状态下 fakeItem 和普通 item 重叠露馅问题
     // @en bugfix: Solve the problem of overlapping fakeItem and the normal item when item is translucent
+
     var transformStyle = isFake ? {
       visibility: childIndex === total && transforms[0] > 0 || childIndex === -1 && transforms[total - 1] < 0 ? 'hidden' : 'initial'
     } : {
       transform: styleMap.translate + "(" + (transforms[childIndex] || 0) + "px)"
-    };
-    // childSize <= 0 说明是未全部加载完成的首屏情况 做一下特殊处理
+    }; // childSize <= 0 说明是未全部加载完成的首屏情况 做一下特殊处理
     // @en childSize <= 0 indicates that the first screen is not fully loaded, so do some special treatment
+
     var layoutStyle = childSize > 0 ? (_ref3 = {}, _ref3[styleMap.size] = childSize - spaceBetween, _ref3[styleMap.paddingStart] = spaceBetween, _ref3.boxSizing = 'content-box', _ref3) : (_ref4 = {}, _ref4[styleMap.size] = initalSize, _ref4[styleMap.paddingStart] = initialStartSpace, _ref4[styleMap.paddingEnd] = initialEndSpace, _ref4.boxSizing = 'border-box', _ref4.transform = styleMap.translate + "(" + (childIndex === index ? 0 : (index - childIndex) * (spaceBetween + leftOffset + rightOffset)) + "px)", _ref4);
     var fakeStyle = isFake ? getItemFakeStyle(childIndex) : {};
+
     if (isFake && childSize < 0) {
       delete fakeStyle.transform;
     }
+
     return getStyleWithVendor(_extends({}, transformStyle, layoutStyle, fakeStyle));
   }
+
   function renderChild(child, childIndex, prefix) {
     // 兼容线上逻辑，不需要切换放大效果的，不包裹item-inner
     // @en No need to switch the magnification effect, do not wrap item-inner
@@ -818,26 +957,33 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       style: getItemInnerStyle(childIndex)
     }, child);
   }
+
   function renderFakeItem(prefix, fakeIndex, side) {
     if (!fakeItem || fakeIndex === void 0) {
       return null;
     }
+
     var posIndex = side === 'left' ? fakeIndex - total : fakeIndex + total;
     return /*#__PURE__*/React.createElement("div", {
       key: "" + fakeIndex + posIndex,
+      "data-fake-index": fakeIndex,
+      "data-index": posIndex,
       className: cls(prefix + "-item carousel-item fake-item fake-" + side, {
         vertical: vertical
       }),
       style: getItemStyle(posIndex, true)
     }, renderChild(allChildren[fakeIndex], posIndex, prefix));
   }
+
   function renderAllFakeItem(prefix) {
     return fakeIndexes.map(function (fakeIndex) {
       return renderFakeItem(prefix, fakeIndex.index, fakeIndex.side);
     });
   }
+
   function renderCarousel(_ref5) {
     var _cls;
+
     var prefixCls = _ref5.prefixCls;
     var prefix = prefixCls + "-carousel";
     return /*#__PURE__*/React.createElement("div", {
@@ -845,9 +991,11 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       style: wrapStyle,
       ref: domRef
     }, needRefreshDom ? /*#__PURE__*/React.createElement("div", {
+      key: "fake-carousel",
       className: prefix + " wrap-placeholder",
       ref: fakeWrapRef
     }) : null, /*#__PURE__*/React.createElement("div", {
+      key: "carousel",
       className: prefix,
       onTouchEnd: handleTouchEnd,
       onTouchCancel: handleTouchEnd,
@@ -874,7 +1022,8 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       }, inView || transforms[childIndex] ? renderChild(child, childIndex, prefix) : null);
     }), renderAllFakeItem(prefix))), showIndicator && (total > 1 || !hideSingleIndicator) ? /*#__PURE__*/React.createElement("div", {
-      className: cls(prefix + "-indicator pos-" + indicatorPos, (_cls = {}, _cls["vertical ver-pos-" + indicatorVerticalPos] = vertical, _cls), {
+      key: "carousel-indicator",
+      className: cls(prefix + "-indicator pos-" + indicatorPos + " " + prefix + "-indicator-" + (vertical ? 'vertical' : 'horizontal'), (_cls = {}, _cls["vertical ver-pos-" + indicatorVerticalPos] = vertical, _cls), {
         inverse: indicatorInverse === void 0 ? indicatorOutside : indicatorInverse
       }, {
         outside: indicatorOutside
@@ -888,6 +1037,7 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     })) : null);
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderCarousel);
 });
 export default Carousel;