diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index bffc8ef3637..68d4f03e98e 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
 import { RequestedItem } from "./components/accordion/interfaces";
 import { IconNameOrString } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
 import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 import { DialogPlacement } from "./components/dialog/interfaces";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { Element } from "@stencil/core";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { IconNameOrString } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
 export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 export { DialogPlacement } from "./components/dialog/interfaces";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { Element } from "@stencil/core";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
index 64867a6d3df..7cd107e93b6 100644
--- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
@@ -1,7 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { CSS, DURATION } from "./resources";
+import { breakpoints } from "../../utils/responsive";
+import { CSS, DURATION, centerItemsByBreakpoint } from "./resources";
 
 const slideDurationWaitTimer = DURATION + 250;
 
@@ -1055,3 +1056,86 @@ describe("calcite-carousel", () => {
     expect(animationEndSpy).toHaveReceivedEventTimes(8);
   });
 });
+describe("renders the expected number of pagination items when overflowing", () => {
+  it("correctly limits the number of slide pagination items shown when overflowing xxsmall first selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:200px")">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["xxsmall"] + 2);
+  });
+
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall first selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xxsmall"]}px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["xsmall"] + 2);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xsmall"]}px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4" selected><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["small"] + 2);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["small"]}px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10" selected><p>tenth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["medium"] + 2);
+  });
+});
diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index 0b5efba059f..9e9b84ab253 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -221,6 +221,25 @@ calcite-carousel-item:not([selected]) {
   }
 }
 
+.pagination-item--individual {
+  @apply w-0 p-0 opacity-0 pointer-events-none;
+  visibility: hidden;
+  transition:
+    var(--calcite-animation-timing) ease-in-out inline-size,
+    var(--calcite-animation-timing) ease-in-out padding,
+    var(--calcite-animation-timing) ease-in-out opacity;
+
+  &.pagination-item--visible {
+    @apply w-8 opacity-100 pointer-events-auto;
+    visibility: visible;
+  }
+}
+
+.pagination-item--range-edge calcite-icon {
+  scale: 0.75;
+  transition: var(--calcite-animation-timing) ease-in-out scale;
+}
+
 .container--overlaid .pagination-item {
   background-color: var(--calcite-internal-internal-carousel-item-background-color);
   &:hover {
diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index a6812b7f86b..b0039d05013 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -76,6 +76,234 @@ export const simple = (args: CarouselStoryArgs): string =>
     </calcite-carousel>
   </div>`;
 
+export const simpleManyItems = (args: CarouselStoryArgs): string =>
+  html` <div style="width:600px;height:400px;">
+    <calcite-carousel
+      control-overlay="${args.controlOverlay}"
+      ${boolean("disabled", args.disabled)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
+      label="${args.label}"
+      arrow-type="${args.arrowType}"
+    >
+      <calcite-carousel-item label="Carousel Item 1">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 2">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 3">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 4">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 5">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 6">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 7">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 8">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 9">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+    </calcite-carousel>
+  </div>`;
+
+export const simpleManyItemsNarrow = (args: CarouselStoryArgs): string =>
+  html` <div style="width:400px;height:400px;">
+    <calcite-carousel
+      control-overlay="${args.controlOverlay}"
+      ${boolean("disabled", args.disabled)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
+      label="${args.label}"
+      arrow-type="${args.arrowType}"
+    >
+      <calcite-carousel-item label="Carousel Item 1">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 2">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 3">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 4">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 5">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 6">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 7">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 8">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 9">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+    </calcite-carousel>
+  </div>`;
+
+export const simpleManyItemsVeryNarrow = (args: CarouselStoryArgs): string =>
+  html` <div style="width:200px;height:400px;">
+    <calcite-carousel
+      control-overlay="${args.controlOverlay}"
+      ${boolean("disabled", args.disabled)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
+      label="${args.label}"
+      arrow-type="${args.arrowType}"
+    >
+      <calcite-carousel-item label="Carousel Item 1">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 2">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 3">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 4">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 5">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 6">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 7">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 8">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 9">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+    </calcite-carousel>
+  </div>`;
+
 export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
   html` <div style="width:600px;height:400px;">
     <style>
@@ -173,9 +401,6 @@ export const carouselWithAutoplayNoOverlay = (): string =>
         margin: 2rem auto 1rem;
         display: block;
       }
-      calcite-carousel {
-        width: 400px;
-      }
       calcite-carousel-item p {
         text-align: center;
         margin: 0 auto 1rem;
@@ -330,9 +555,6 @@ export const darkModeRTL = (): string =>
         margin: 2rem auto 1rem;
         display: block;
       }
-      calcite-carousel {
-        width: 400px;
-      }
       calcite-carousel-item p {
         text-align: center;
         margin: 0 auto 1rem;
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index c8d397278f0..93dd95db645 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -38,8 +38,10 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
+import { createObserver } from "../../utils/observers";
+import { breakpoints } from "../../utils/responsive";
 import { getRoundRobinIndex } from "../../utils/array";
-import { CSS, DURATION, ICONS } from "./resources";
+import { CSS, DURATION, ICONS, centerItemsByBreakpoint } from "./resources";
 import { CarouselMessages } from "./assets/carousel/t9n";
 import { ArrowType, AutoplayType } from "./interfaces";
 
@@ -140,6 +142,7 @@ export class Carousel
   connectedCallback(): void {
     connectLocalized(this);
     connectMessages(this);
+    this.resizeObserver?.observe(this.el);
   }
 
   componentDidLoad(): void {
@@ -154,6 +157,7 @@ export class Carousel
     disconnectLocalized(this);
     disconnectMessages(this);
     this.clearIntervals();
+    this.resizeObserver?.disconnect();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -164,7 +168,6 @@ export class Carousel
       this.paused = true;
     }
     setUpLoadableComponent(this);
-
     await setUpMessages(this);
   }
 
@@ -263,16 +266,24 @@ export class Carousel
 
   @State() slideDurationRemaining = 1;
 
+  @State() maxItems = centerItemsByBreakpoint.xxsmall;
+
   private container: HTMLDivElement;
 
   private containerId = `calcite-carousel-container-${guid()}`;
 
+  private itemContainer: HTMLDivElement;
+
   private slideDurationInterval = null;
 
   private slideInterval = null;
 
   private tabList: HTMLDivElement;
 
+  private resizeObserver = createObserver("resize", (entries) =>
+    entries.forEach(this.resizeHandler),
+  );
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -300,6 +311,33 @@ export class Carousel
   //
   // --------------------------------------------------------------------------
 
+  private setMaxItemsToBreakpoint(width: number): void {
+    if (!width) {
+      return;
+    }
+
+    if (width >= breakpoints.width.small) {
+      this.maxItems = centerItemsByBreakpoint.medium;
+      return;
+    }
+
+    if (width >= breakpoints.width.xsmall) {
+      this.maxItems = centerItemsByBreakpoint.small;
+      return;
+    }
+
+    if (width >= breakpoints.width.xxsmall) {
+      this.maxItems = centerItemsByBreakpoint.xsmall;
+      return;
+    }
+
+    this.maxItems = centerItemsByBreakpoint.xxsmall;
+  }
+
+  private resizeHandler = ({ contentRect: { width } }: ResizeObserverEntry): void => {
+    this.setMaxItemsToBreakpoint(width);
+  };
+
   private clearIntervals() {
     clearInterval(this.slideDurationInterval);
     clearInterval(this.slideInterval);
@@ -379,15 +417,17 @@ export class Carousel
     const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;
 
     this.items = items;
+
     this.setSelectedItem(requestedSelectedIndex, false);
   };
 
   private setSelectedItem = (requestedIndex: number, emit: boolean): void => {
     const previousSelected = this.selectedIndex;
+
     this.items.forEach((el, index) => {
-      const isMatch = requestedIndex === index;
-      el.selected = isMatch;
-      if (isMatch) {
+      const match = requestedIndex === index;
+      el.selected = match;
+      if (match) {
         this.selectedItem = el;
         this.selectedIndex = index;
       }
@@ -501,10 +541,12 @@ export class Carousel
         }
         break;
       case "ArrowRight":
+        event.preventDefault();
         this.direction = "forward";
         this.nextItem(true);
         break;
       case "ArrowLeft":
+        event.preventDefault();
         this.direction = "backward";
         this.previousItem();
         break;
@@ -528,22 +570,24 @@ export class Carousel
   };
 
   private tabListKeyDownHandler = (event: KeyboardEvent): void => {
-    const interactiveItems = Array(...this.tabList.querySelectorAll("button"));
+    const visiblePaginationEls = Array(
+      ...this.tabList.querySelectorAll(`button:not(.${CSS.paginationItemOutOfRange})`),
+    );
     const currentEl = event.target as HTMLCalciteActionElement;
     switch (event.key) {
       case "ArrowRight":
-        focusElementInGroup(interactiveItems, currentEl, "next");
+        focusElementInGroup(visiblePaginationEls, currentEl, "next");
         break;
       case "ArrowLeft":
-        focusElementInGroup(interactiveItems, currentEl, "previous");
+        focusElementInGroup(visiblePaginationEls, currentEl, "previous");
         break;
       case "Home":
         event.preventDefault();
-        focusElementInGroup(interactiveItems, currentEl, "first");
+        focusElementInGroup(visiblePaginationEls, currentEl, "first");
         break;
       case "End":
         event.preventDefault();
-        focusElementInGroup(interactiveItems, currentEl, "last");
+        focusElementInGroup(visiblePaginationEls, currentEl, "last");
         break;
     }
   };
@@ -556,8 +600,6 @@ export class Carousel
     this.container = el;
   };
 
-  private itemContainer: HTMLDivElement;
-
   private storeItemContainerRef = (el: HTMLDivElement): void => {
     this.itemContainer = el;
   };
@@ -609,31 +651,52 @@ export class Carousel
     </div>
   );
 
-  renderPaginationItems = (): VNode => (
-    <div aria-label={this.label} class={CSS.paginationItems} role="tablist">
-      {this.items.map((item, index) => {
-        const isMatch = index === this.selectedIndex;
-        return (
-          <button
-            aria-controls={!isMatch ? item.id : undefined}
-            aria-selected={toAriaBoolean(isMatch)}
-            class={{
-              [CSS.paginationItem]: true,
-              [CSS.paginationItemIndividual]: true,
-              [CSS.paginationItemSelected]: isMatch,
-            }}
-            data-index={index}
-            key={item.id}
-            onClick={this.handleItemSelection}
-            role="tab"
-            title={item.label}
-          >
-            <calcite-icon icon={isMatch ? ICONS.active : ICONS.inactive} scale="l" />
-          </button>
-        );
-      })}
-    </div>
-  );
+  renderPaginationItems = (): VNode => {
+    const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
+    return (
+      <div aria-label={label} class={CSS.paginationItems} role="tablist">
+        {items.map((item, index) => {
+          const itemCount = items.length;
+          const match = index === selectedIndex;
+          const first = index === 0;
+          const last = index === itemCount - 1;
+          const endRangeStart = itemCount - maxItems - 1;
+          const inStartRange = selectedIndex < maxItems;
+          const inEndRange = selectedIndex >= endRangeStart;
+          const rangeStart = inStartRange ? 0 : selectedIndex - Math.floor(maxItems / 2);
+          const rangeEnd = inEndRange ? itemCount : rangeStart + maxItems;
+          const low = inStartRange ? 0 : inEndRange ? endRangeStart : rangeStart;
+          const high = inStartRange ? maxItems + 1 : rangeEnd;
+          const isEdge = !first && !last && !match && (index === low - 1 || index === high);
+          const visible = match || (index <= high && index >= low - 1);
+          const overflowActive = itemCount - 1 <= maxItems;
+          const icon = match ? ICONS.active : ICONS.inactive;
+
+          return (
+            <button
+              aria-controls={!match ? item.id : undefined}
+              aria-selected={toAriaBoolean(match)}
+              class={{
+                [CSS.paginationItem]: true,
+                [CSS.paginationItemIndividual]: true,
+                [CSS.paginationItemSelected]: match,
+                [CSS.paginationItemRangeEdge]: itemCount - 1 > maxItems && isEdge,
+                [CSS.paginationItemOutOfRange]: !(overflowActive || visible),
+                [CSS.paginationItemVisible]: overflowActive || visible,
+              }}
+              data-index={index}
+              key={item.id}
+              onClick={handleItemSelection}
+              role="tab"
+              title={item.label}
+            >
+              <calcite-icon icon={icon} scale="l" />
+            </button>
+          );
+        })}
+      </div>
+    );
+  };
 
   renderArrow = (direction: "previous" | "next"): VNode => {
     const isPrev = direction === "previous";
diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts
index 088997a1a50..bd2c71e7278 100644
--- a/packages/calcite-components/src/components/carousel/resources.ts
+++ b/packages/calcite-components/src/components/carousel/resources.ts
@@ -11,7 +11,10 @@ export const CSS = {
   paginationItems: "pagination-items",
   paginationItem: "pagination-item",
   paginationItemIndividual: "pagination-item--individual",
+  paginationItemVisible: "pagination-item--visible",
+  paginationItemOutOfRange: "pagination-item--out-of-range",
   paginationItemSelected: "pagination-item--selected",
+  paginationItemRangeEdge: "pagination-item--range-edge",
   pageNext: "page-next",
   pagePrevious: "page-previous",
   autoplayControl: "autoplay-control",
@@ -26,3 +29,10 @@ export const ICONS = {
   pause: "pause-f",
   play: "play-f",
 } as const;
+
+export const centerItemsByBreakpoint = {
+  medium: 7,
+  small: 5,
+  xsmall: 3,
+  xxsmall: 1,
+};
diff --git a/packages/calcite-components/src/demos/carousel.html b/packages/calcite-components/src/demos/carousel.html
index 4fb500a67fc..060262e27f4 100644
--- a/packages/calcite-components/src/demos/carousel.html
+++ b/packages/calcite-components/src/demos/carousel.html
@@ -116,7 +116,13 @@ <h3>Interactive Demo</h3>
             </calcite-label>
             <calcite-label
               >duration
-              <calcite-input id="input-duration" placeholder="6000"></calcite-input>
+              <calcite-input-number
+                id="input-duration"
+                placeholder="6000"
+                min="1000"
+                step="1000"
+                value="6000"
+              ></calcite-input-number>
             </calcite-label>
             <calcite-label
               >play() (if autoplay is present)
@@ -156,8 +162,281 @@ <h3>Interactive Demo</h3>
                   An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
                 </p>
               </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
             </calcite-carousel>
           </div>
+          <div class="child">
+            <h3>Max items overlap prevention</h3>
+            <calcite-shell
+              style="
+                position: relative;
+                height: 500px;
+                --calcite-shell-panel-min-width: 200px;
+                --calcite-shell-panel-max-width: 400px;
+              "
+            >
+              <calcite-shell-panel
+                slot="panel-start"
+                resizable
+                width-scale="l"
+                style="--calcite-shell-panel-min-width: 120px; --calcite-shell-panel-max-width: 240px"
+              >
+                <calcite-panel heading="Narrow resizable" description="middle item on load">
+                  <calcite-carousel id="example-carousel">
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-1"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Long Trees">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-2"></calcite-icon>
+                        Another bit of content about this unbelievable item can go here on the second carousel item as
+                        an example
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-3"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-4"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item selected label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-8"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-9"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                  </calcite-carousel>
+                </calcite-panel>
+              </calcite-shell-panel>
+
+              <calcite-shell-panel
+                slot="panel-end"
+                resizable
+                position="end"
+                width-scale="l"
+                style="position: relative; --calcite-shell-panel-min-width: 0; --calcite-shell-panel-max-width: 800px"
+              >
+                <calcite-panel heading="Example resizable" description="preventing overlap with edge of container">
+                  <calcite-carousel id="example-carousel">
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-1"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Long Trees">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-2"></calcite-icon>
+                        Another bit of content about this unbelievable item can go here on the second carousel item as
+                        an example
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-3"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-4"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-8"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-9"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                  </calcite-carousel>
+                </calcite-panel>
+              </calcite-shell-panel>
+            </calcite-shell>
+          </div>
+
           <div class="child">
             <hr />
             <h3>Themed</h3>
@@ -286,7 +565,7 @@ <h3>autoplay</h3>
               <calcite-panel heading="Content">
                 <calcite-block open style="height: 400px">
                   <calcite-button style="margin: 1rem" id="example-popover">Launch onboarding</calcite-button>
-                  <calcite-popover open reference-element="example-popover" heading="Welcome to the show!" closable>
+                  <calcite-popover reference-element="example-popover" heading="Welcome to the show!" closable>
                     <calcite-carousel>
                       <calcite-carousel-item label="The Red Rocks and Blue Water">
                         <p>
@@ -386,7 +665,7 @@ <h3>autoplay</h3>
                   </calcite-block>
                   <calcite-block open>
                     <calcite-button style="margin: 1rem" id="example-popover-2">Launch onboarding</calcite-button>
-                    <calcite-popover open reference-element="example-popover-2" heading="Welcome to the show!" closable>
+                    <calcite-popover reference-element="example-popover-2" heading="Welcome to the show!" closable>
                       <calcite-carousel>
                         <calcite-carousel-item label="The Red Rocks and Blue Water">
                           <p>
@@ -462,8 +741,7 @@ <h3>autoplay</h3>
           carousel.controlOverlay = event.target.checked;
         });
 
-        durationInput.addEventListener("calciteInputInput", function () {
-          console.log(event.target.value);
+        durationInput.addEventListener("calciteInputNumberInput", function () {
           carousel.autoplayDuration = event.target.value;
         });