diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx index ed2f609ed4a..e8d96e81f85 100644 --- a/packages/blade/src/components/Carousel/Carousel.web.tsx +++ b/packages/blade/src/components/Carousel/Carousel.web.tsx @@ -39,6 +39,7 @@ type ControlsProp = Required< onIndicatorButtonClick: (index: number) => void; onNextButtonClick: () => void; onPreviousButtonClick: () => void; + showControls: boolean; }; const Controls = ({ @@ -51,43 +52,46 @@ const Controls = ({ onPreviousButtonClick, indicatorVariant, navigationButtonVariant, + showControls, }: ControlsProp): React.ReactElement => { - if (navigationButtonPosition === 'bottom') { - return ( - - - {showIndicators ? ( + if (showControls) { + if (navigationButtonPosition === 'bottom') { + return ( + + + {showIndicators ? ( + + ) : null} + + + ); + } + + if (showIndicators && navigationButtonPosition === 'side') { + return ( + - ) : null} - - - ); - } - - if (showIndicators && navigationButtonPosition === 'side') { - return ( - - - - ); + + ); + } } return <>; @@ -308,6 +312,7 @@ const Carousel = ({ const shouldNavButtonsFloat = isResponsive && navigationButtonPosition === 'side'; const totalNumberOfSlides = React.Children.count(children); const numberOfIndicators = Math.ceil(totalNumberOfSlides / _visibleItems); + const shouldShowControls = totalNumberOfSlides > _visibleItems; // hide next/prev button on reaching start/end when carousel is responsive // in non-responsive carousel we always show the next/prev buttons to allow looping @@ -529,7 +534,7 @@ const Carousel = ({ flexDirection="row" height="100%" > - {shouldShowPrevButton && shouldNavButtonsFloat ? ( + {shouldShowPrevButton && shouldNavButtonsFloat && shouldShowControls ? ( ) : null} - {isNavButtonsOnSide ? ( + {isNavButtonsOnSide && shouldShowControls ? ( {children} - {shouldShowNextButton && shouldNavButtonsFloat ? ( + {shouldShowNextButton && shouldNavButtonsFloat && shouldShowControls ? ( ) : null} - {isNavButtonsOnSide ? ( + {isNavButtonsOnSide && shouldShowControls ? (