diff --git a/src/fullscreen-image-carousel/fullscreen-image-carousel.tsx b/src/fullscreen-image-carousel/fullscreen-image-carousel.tsx
index 5dfe7ad3b..e721400c0 100644
--- a/src/fullscreen-image-carousel/fullscreen-image-carousel.tsx
+++ b/src/fullscreen-image-carousel/fullscreen-image-carousel.tsx
@@ -48,11 +48,18 @@ import {
     TopActionButtons,
 } from "./fullscreen-image-carousel.style";
 import {
+    FullscreenImageCarouselCustomItemProps,
+    FullscreenImageCarouselItemProps,
     FullscreenImageCarouselProps,
     FullscreenImageCarouselRef,
     ImageDimension,
 } from "./types";
 
+const isCustomItem = (
+    item: FullscreenImageCarouselItemProps | undefined
+): item is FullscreenImageCarouselCustomItemProps =>
+    !!item && item.type === "custom";
+
 export const Component = (
     {
         items,
@@ -87,14 +94,25 @@ export const Component = (
     const imageRef = useRef<HTMLDivElement>(null);
     const diff = startX && endX ? startX - endX : 0;
     const currentItem = items[currentSlide];
+    const hasAnyItemLabel = items.some(
+        (item) => isCustomItem(item) && !!item.itemLabel?.trim()
+    );
+    const carouselItemNoun = hasAnyItemLabel ? "item" : "image";
 
-    const getImageAriaLabel = useCallback(
+    const getItemAriaLabel = useCallback(
         (index: number) => {
             const item = items[index];
-            const altText = item.alt?.trim() || "";
-            return `${altText}. Image ${index + 1} of ${items.length}.`;
+            const itemTypeLabel = hasAnyItemLabel ? "Item" : "Image";
+            const prefix = isCustomItem(item)
+                ? item.itemLabel?.trim() || ""
+                : item.alt?.trim() || "";
+            const positionLabel = `${itemTypeLabel} ${index + 1} of ${
+                items.length
+            }.`;
+
+            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;
         },
-        [items]
+        [items, hasAnyItemLabel]
     );
 
     useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(
@@ -208,7 +226,7 @@ export const Component = (
     };
 
     const getZoomRatio = () => {
-        if (!currentItem) {
+        if (!currentItem || isCustomItem(currentItem)) {
             return;
         }
 
@@ -243,7 +261,7 @@ export const Component = (
             (prev) => (prev === 0 ? items.length - 1 : prev - 1),
             (slide) => {
                 clearAnnouncer("polite");
-                announce(getImageAriaLabel(slide), "polite");
+                announce(getItemAriaLabel(slide), "polite");
             }
         );
     };
@@ -254,7 +272,7 @@ export const Component = (
             (prev) => (prev === items.length - 1 ? 0 : prev + 1),
             (slide) => {
                 clearAnnouncer("polite");
-                announce(getImageAriaLabel(slide), "polite");
+                announce(getItemAriaLabel(slide), "polite");
             }
         );
     };
@@ -278,6 +296,10 @@ export const Component = (
             >
                 {items.map((item, index) => {
                     const isActive = index === currentSlide;
+                    const isActiveOrAdjacent =
+                        Math.abs(index - currentSlide) <= 1 ||
+                        (currentSlide === 0 && index === items.length - 1) ||
+                        (currentSlide === items.length - 1 && index === 0);
 
                     return (
                         <ImageGallerySlide key={index} data-testid="slide-item">
@@ -285,29 +307,39 @@ export const Component = (
                                 ref={isActive ? imageRef : null}
                                 tabIndex={isActive ? 0 : -1}
                             >
-                                <TransformWrapper
-                                    ref={(el) => (zoomRefs.current[index] = el)}
-                                    panning={{
-                                        disabled: zoom <= 1,
-                                    }}
-                                    initialScale={1}
-                                    onZoom={handleZoom}
-                                    onZoomStop={handleZoom}
-                                    onWheel={handleZoom}
-                                >
-                                    <TransformComponent>
-                                        <SlideImage
-                                            src={item.src}
-                                            alt={getImageAriaLabel(index)}
-                                            placeholder={
-                                                <SlidePlaceholderImage />
-                                            }
-                                            fit="scale-down"
-                                            retrieveImageDimension
-                                            setDimension={setDimension}
-                                        />
-                                    </TransformComponent>
-                                </TransformWrapper>
+                                {isCustomItem(item) ? (
+                                    isActiveOrAdjacent ? (
+                                        item.renderContent()
+                                    ) : (
+                                        <SlidePlaceholderImage />
+                                    )
+                                ) : (
+                                    <TransformWrapper
+                                        ref={(el) =>
+                                            (zoomRefs.current[index] = el)
+                                        }
+                                        panning={{
+                                            disabled: zoom <= 1,
+                                        }}
+                                        initialScale={1}
+                                        onZoom={handleZoom}
+                                        onZoomStop={handleZoom}
+                                        onWheel={handleZoom}
+                                    >
+                                        <TransformComponent>
+                                            <SlideImage
+                                                src={item.src}
+                                                alt={getItemAriaLabel(index)}
+                                                placeholder={
+                                                    <SlidePlaceholderImage />
+                                                }
+                                                fit="scale-down"
+                                                retrieveImageDimension
+                                                setDimension={setDimension}
+                                            />
+                                        </TransformComponent>
+                                    </TransformWrapper>
+                                )}
                             </FocusableImageRegion>
                         </ImageGallerySlide>
                     );
@@ -324,7 +356,9 @@ export const Component = (
             >
                 <ThumbnailWrapper>
                     {items.map((item, index) => {
-                        const src = item.thumbnailSrc ?? item.src;
+                        const src = isCustomItem(item)
+                            ? item.thumbnailSrc
+                            : item.thumbnailSrc ?? item.src;
                         return (
                             <ThumbnailItemContainer key={index}>
                                 <ThumbnailItem
@@ -335,11 +369,15 @@ export const Component = (
                                         (thumbnailRefs.current[index] = el)
                                     }
                                 >
-                                    <ThumbnailImage
-                                        src={src}
-                                        alt={`Thumbnail ${index + 1}`}
-                                        fit="cover"
-                                    />
+                                    {src ? (
+                                        <ThumbnailImage
+                                            src={src}
+                                            alt={`Thumbnail ${index + 1}`}
+                                            fit="cover"
+                                        />
+                                    ) : (
+                                        <SlidePlaceholderImage />
+                                    )}
                                 </ThumbnailItem>
                             </ThumbnailItemContainer>
                         );
@@ -353,7 +391,7 @@ export const Component = (
         <ModalV2
             {...otherProps}
             data-testid="image-carousel-modal"
-            aria-label="Image carousel"
+            aria-label={hasAnyItemLabel ? "Carousel" : "Image carousel"}
             show={show}
             disableInitialFocus
         >
@@ -372,7 +410,7 @@ export const Component = (
                         {!hideNavigation && (
                             <>
                                 <ArrowButton
-                                    aria-label="Previous image"
+                                    aria-label={`Previous ${carouselItemNoun}`}
                                     data-testid="prev-btn"
                                     $position="left"
                                     onClick={goToPrevSlide}
@@ -382,7 +420,7 @@ export const Component = (
                                     <ChevronLeftIcon aria-hidden />
                                 </ArrowButton>
                                 <ArrowButton
-                                    aria-label="Next image"
+                                    aria-label={`Next ${carouselItemNoun}`}
                                     data-testid="forward-btn"
                                     $position="right"
                                     onClick={goToNextSlide}
@@ -410,7 +448,7 @@ export const Component = (
                     $insetTop={insets?.top}
                     $insetRight={insets?.right}
                 >
-                    {!hideMagnifier && (
+                    {!hideMagnifier && !isCustomItem(currentItem) && (
                         <MagnifierButton
                             aria-label={zoom === 1 ? "Zoom in" : "Zoom out"}
                             onClick={handleMagnifier}
@@ -425,7 +463,11 @@ export const Component = (
 
                     {onDelete && (
                         <DeleteButton
-                            aria-label="Delete image"
+                            aria-label={`Delete ${
+                                (isCustomItem(currentItem) &&
+                                    currentItem.itemLabel?.trim()) ||
+                                "image"
+                            }`}
                             data-testid="delete-btn"
                             onClick={handleDelete}
                         >
@@ -434,7 +476,11 @@ export const Component = (
                     )}
 
                     <CloseButton
-                        aria-label="Close image carousel"
+                        aria-label={
+                            hasAnyItemLabel
+                                ? "Close carousel"
+                                : "Close image carousel"
+                        }
                         onClick={onClose}
                     >
                         <CrossIcon aria-hidden />
diff --git a/src/fullscreen-image-carousel/types.ts b/src/fullscreen-image-carousel/types.ts
index 70cbb3105..3cb19d334 100644
--- a/src/fullscreen-image-carousel/types.ts
+++ b/src/fullscreen-image-carousel/types.ts
@@ -13,7 +13,7 @@ export interface FullscreenImageCarouselProps
         ModalProps,
         "show" | "rootComponentId" | "animationFrom" | "zIndex"
     > {
-    items: FullscreenCarouselItemProps[];
+    items: FullscreenImageCarouselItemProps[];
     /** The index of the visible item, starts from 0 */
     initialActiveItemIndex?: number | undefined;
     hideThumbnail?: boolean | undefined;
@@ -21,18 +21,37 @@ export interface FullscreenImageCarouselProps
     hideCounter?: boolean | undefined;
     hideMagnifier?: boolean | undefined;
     onDelete?:
-        | ((item: FullscreenCarouselItemProps, index: number) => void)
+        | ((item: FullscreenImageCarouselItemProps, index: number) => void)
         | undefined;
     onClose?: (() => void) | undefined;
     insets?: Insets | undefined;
 }
 
-export interface FullscreenCarouselItemProps {
+export interface FullscreenImageCarouselImageItemProps {
+    type?: "image" | undefined;
     src: string;
     alt?: string | undefined;
     thumbnailSrc?: string | undefined;
+    renderContent?: never;
 }
 
+/** @deprecated Use FullscreenImageCarouselImageItemProps instead */
+export type FullscreenCarouselItemProps = FullscreenImageCarouselImageItemProps;
+
+export interface FullscreenImageCarouselCustomItemProps {
+    type: "custom";
+    /** The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip. */
+    thumbnailSrc?: string | undefined;
+    /** Label for this item used in aria-labels (e.g. "PDF"). Defaults to "image". When any item sets this, carousel-level aria-labels use generic "item" wording. */
+    itemLabel?: string | undefined;
+    /** Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). */
+    renderContent: () => React.ReactNode;
+}
+
+export type FullscreenImageCarouselItemProps =
+    | FullscreenImageCarouselImageItemProps
+    | FullscreenImageCarouselCustomItemProps;
+
 export interface ImageDimension {
     width: number;
     height: number;
diff --git a/stories/fullscreen-image-carousel/fullscreen-image-carousel.mdx b/stories/fullscreen-image-carousel/fullscreen-image-carousel.mdx
index 414ba190f..723cd4fb6 100644
--- a/stories/fullscreen-image-carousel/fullscreen-image-carousel.mdx
+++ b/stories/fullscreen-image-carousel/fullscreen-image-carousel.mdx
@@ -32,6 +32,12 @@ import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-
 
 <Canvas of={FullscreenImageCarouselStories.Configurable} />
 
+## With custom content
+
+Slides can render arbitrary content via `renderContent`. If the content is not an image, you are recommended to set `itemLabel` so that the type of content can be described accurately to screen readers.
+
+<Canvas of={FullscreenImageCarouselStories.WithCustomContent} />
+
 ## Component API
 
 <PropsTable />
diff --git a/stories/fullscreen-image-carousel/fullscreen-image-carousel.stories.tsx b/stories/fullscreen-image-carousel/fullscreen-image-carousel.stories.tsx
index 4e47dcb60..014d8db83 100644
--- a/stories/fullscreen-image-carousel/fullscreen-image-carousel.stories.tsx
+++ b/stories/fullscreen-image-carousel/fullscreen-image-carousel.stories.tsx
@@ -135,3 +135,63 @@ export const Configurable: StoryObj<Component> = {
         );
     },
 };
+
+export const WithCustomContent: StoryObj<Component> = {
+    render: (_args) => {
+        const [show, setShow] = useState(false);
+        return (
+            <>
+                <Button.Default
+                    onClick={() => {
+                        setShow((old) => !old);
+                    }}
+                >
+                    Show carousel
+                </Button.Default>
+                <FullscreenImageCarousel
+                    items={[
+                        {
+                            type: "custom",
+                            itemLabel: "PDF",
+                            thumbnailSrc:
+                                "https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",
+                            renderContent: () => (
+                                <iframe
+                                    src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
+                                    title="PDF preview"
+                                    style={{
+                                        width: "100%",
+                                        height: "100%",
+                                        border: "none",
+                                    }}
+                                />
+                            ),
+                        },
+                        {
+                            type: "custom",
+                            itemLabel: "document",
+                            renderContent: () => (
+                                <div
+                                    style={{
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        width: "100%",
+                                        height: "100%",
+                                        color: "#fff",
+                                        fontSize: 24,
+                                    }}
+                                >
+                                    No thumbnail provided
+                                </div>
+                            ),
+                        },
+                    ]}
+                    show={show}
+                    onDelete={() => undefined}
+                    onClose={() => setShow(false)}
+                />
+            </>
+        );
+    },
+};
diff --git a/stories/fullscreen-image-carousel/props-table.tsx b/stories/fullscreen-image-carousel/props-table.tsx
index f7b30a1ad..f51824caa 100644
--- a/stories/fullscreen-image-carousel/props-table.tsx
+++ b/stories/fullscreen-image-carousel/props-table.tsx
@@ -46,7 +46,7 @@ const DATA: ApiTableSectionProps[] = [
             {
                 name: "items",
                 description: "List of carousel items",
-                propTypes: ["FullscreenCarouselItemProps[]"],
+                propTypes: ["FullscreenImageCarouselItemProps[]"],
                 mandatory: true,
             },
             {
@@ -83,7 +83,7 @@ const DATA: ApiTableSectionProps[] = [
                 description:
                     "Called when the current image delete button is clicked. When provided, the delete button will be shown. If called, do not reorder the items array while a delete is in flight.",
                 propTypes: [
-                    "(item: FullscreenCarouselItemProps, index: number) => void",
+                    "(item: FullscreenImageCarouselItemProps, index: number) => void",
                 ],
             },
             {
@@ -109,13 +109,37 @@ const DATA: ApiTableSectionProps[] = [
         ],
     },
     {
-        name: "FullscreenCarouselItemProps",
+        name: "FullscreenImageCarouselItemProps",
         attributes: [
+            {
+                name: "",
+                description: (
+                    <>
+                        One of
+                        <code>FullscreenImageCarouselImageItemProps</code> or
+                        <code>FullscreenImageCarouselCustomItemProps</code>
+                    </>
+                ),
+            },
+        ],
+    },
+    {
+        name: "FullscreenImageCarouselImageItemProps",
+        attributes: [
+            {
+                name: "type",
+                description: (
+                    <>
+                        Discriminant for the item type. Must be{" "}
+                        <code>&quot;image&quot;</code> or omitted
+                    </>
+                ),
+            },
             {
                 name: "src",
                 description: "The image src",
-                propTypes: ["string"],
                 mandatory: true,
+                propTypes: ["string"],
             },
             {
                 name: "alt",
@@ -128,11 +152,49 @@ const DATA: ApiTableSectionProps[] = [
                 description: (
                     <>
                         The thumbnail image src. If not specified, the image{" "}
-                        <code>src</code> will be used
+                        <code>src</code> will be used. If neither are valid, a
+                        placeholder is shown
+                    </>
+                ),
+                propTypes: ["string"],
+            },
+        ],
+    },
+    {
+        name: "FullscreenImageCarouselCustomItemProps",
+        attributes: [
+            {
+                name: "type",
+                description: (
+                    <>
+                        Discriminant for the item type. Must be{" "}
+                        <code>&quot;custom&quot;</code>
+                    </>
+                ),
+                mandatory: true,
+            },
+            {
+                name: "thumbnailSrc",
+                description:
+                    "The thumbnail image src. If not specified, a placeholder is shown",
+                propTypes: ["string"],
+            },
+            {
+                name: "itemLabel",
+                description: (
+                    <>
+                        Label to describe the type of content (e.g.{" "}
+                        <code>&quot;PDF&quot;</code>)
                     </>
                 ),
                 propTypes: ["string"],
             },
+            {
+                name: "renderContent",
+                description: "Custom render prop for the full slide area",
+                mandatory: true,
+                propTypes: ["() => React.ReactNode"],
+            },
         ],
     },
 ];
diff --git a/tests/fullscreen-image-carousel/fullscreen-image-carousel.spec.tsx b/tests/fullscreen-image-carousel/fullscreen-image-carousel.spec.tsx
index f70868724..5411abdb0 100644
--- a/tests/fullscreen-image-carousel/fullscreen-image-carousel.spec.tsx
+++ b/tests/fullscreen-image-carousel/fullscreen-image-carousel.spec.tsx
@@ -111,6 +111,149 @@ describe("Fullscreen Image Carousel", () => {
             expect(screen.getByText("1/4")).toBeInTheDocument();
         });
     });
+
+    describe("Custom content (renderContent)", () => {
+        it("should render custom content from renderContent", () => {
+            render(
+                <FullscreenImageCarousel
+                    items={MIXED_ITEMS}
+                    show={true}
+                    initialActiveItemIndex={1}
+                />
+            );
+
+            expect(
+                screen.getByTestId("custom-slide-content")
+            ).toBeInTheDocument();
+        });
+
+        it("should hide magnifier button when current item is custom", () => {
+            render(
+                <FullscreenImageCarousel
+                    items={MIXED_ITEMS}
+                    show={true}
+                    initialActiveItemIndex={1}
+                />
+            );
+
+            expect(screen.queryByLabelText("Zoom in")).not.toBeInTheDocument();
+        });
+
+        it("should show magnifier button when current item is an image", () => {
+            render(
+                <FullscreenImageCarousel
+                    items={MIXED_ITEMS}
+                    show={true}
+                    initialActiveItemIndex={0}
+                />
+            );
+
+            expect(screen.getByLabelText("Zoom in")).toBeInTheDocument();
+        });
+
+        it("should render placeholder thumbnail when custom item has no thumbnailSrc", () => {
+            render(<FullscreenImageCarousel items={MIXED_ITEMS} show={true} />);
+
+            const thumbnails = screen.getAllByTestId("thumbnail-item");
+            // The placeholder renders an SVG icon instead of an <img>,
+            // so querying for img elements should return none
+            const imgs = thumbnails[1].querySelectorAll("img");
+            expect(imgs.length).toBe(0);
+        });
+
+        it("should use src as fallback thumbnail when image item has no thumbnailSrc", async () => {
+            const OriginalImage = global.Image;
+            // Simulate image load completing in jsdom (onload never fires natively)
+            (global as any).Image = class {
+                width = 100;
+                height = 100;
+                onload: (() => void) | null = null;
+                set src(_: string) {
+                    Promise.resolve().then(() => this.onload?.());
+                }
+            };
+
+            render(
+                <FullscreenImageCarousel
+                    items={IMAGES_WITHOUT_THUMBNAIL}
+                    show={true}
+                />
+            );
+
+            await waitFor(() => {
+                const img = screen
+                    .getAllByTestId("thumbnail-item")[0]
+                    .querySelector("img");
+                expect(img?.getAttribute("src")).toBe(
+                    "https://picsum.photos/id/157/1600/900"
+                );
+            });
+
+            global.Image = OriginalImage;
+        });
+
+        it("should not render custom content for non-adjacent slides", () => {
+            render(
+                <FullscreenImageCarousel
+                    items={SPACED_ITEMS}
+                    show={true}
+                    initialActiveItemIndex={0}
+                />
+            );
+
+            expect(
+                screen.queryByTestId("custom-slide-content")
+            ).not.toBeInTheDocument();
+        });
+    });
+
+    describe("itemLabel aria-labels", () => {
+        it("should use generic wording when any item has itemLabel", () => {
+            render(<FullscreenImageCarousel items={MIXED_ITEMS} show={true} />);
+
+            expect(screen.getByLabelText("Carousel")).toBeInTheDocument();
+            expect(screen.getByLabelText("Close carousel")).toBeInTheDocument();
+            expect(screen.getByLabelText("Previous item")).toBeInTheDocument();
+            expect(screen.getByLabelText("Next item")).toBeInTheDocument();
+        });
+
+        it("should use image-specific wording when no item has itemLabel", () => {
+            render(<FullscreenImageCarousel items={IMAGES} show={true} />);
+
+            expect(screen.getByLabelText("Image carousel")).toBeInTheDocument();
+            expect(
+                screen.getByLabelText("Close image carousel")
+            ).toBeInTheDocument();
+            expect(screen.getByLabelText("Previous image")).toBeInTheDocument();
+            expect(screen.getByLabelText("Next image")).toBeInTheDocument();
+        });
+
+        it("should use per-item itemLabel for the delete button", () => {
+            render(
+                <FullscreenImageCarousel
+                    items={MIXED_ITEMS}
+                    show={true}
+                    initialActiveItemIndex={1}
+                    onDelete={jest.fn()}
+                />
+            );
+
+            expect(screen.getByLabelText("Delete PDF")).toBeInTheDocument();
+        });
+
+        it("should default delete label to 'image' when no itemLabel", () => {
+            render(
+                <FullscreenImageCarousel
+                    items={MIXED_ITEMS}
+                    show={true}
+                    initialActiveItemIndex={0}
+                    onDelete={jest.fn()}
+                />
+            );
+
+            expect(screen.getByLabelText("Delete image")).toBeInTheDocument();
+        });
+    });
 });
 
 // =============================================================================
@@ -122,3 +265,33 @@ const IMAGES = [
     { src: "https://picsum.photos/id/369/1000/1000" },
     { src: "https://picsum.photos/id/445/300/300" },
 ];
+
+const MIXED_ITEMS = [
+    { src: "https://picsum.photos/id/157/1600/900" },
+    {
+        type: "custom" as const,
+        itemLabel: "PDF",
+        renderContent: () => <div data-testid="custom-slide-content">PDF</div>,
+    },
+];
+
+// Custom item at index 3 with images padding both ends, so index 0 is not adjacent
+const SPACED_ITEMS = [
+    { src: "https://picsum.photos/id/157/1600/900" },
+    { src: "https://picsum.photos/id/163/900/300" },
+    { src: "https://picsum.photos/id/369/1000/1000" },
+    {
+        type: "custom" as const,
+        itemLabel: "PDF",
+        renderContent: () => <div data-testid="custom-slide-content">PDF</div>,
+    },
+    { src: "https://picsum.photos/id/445/300/300" },
+];
+
+const IMAGES_WITHOUT_THUMBNAIL = [
+    { src: "https://picsum.photos/id/157/1600/900" },
+    {
+        src: "https://picsum.photos/id/163/900/300",
+        thumbnailSrc: "https://picsum.photos/id/163/100/100",
+    },
+];