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 ? (