diff --git a/dotcom-rendering/src/components/MultiImageBlockComponent.stories.tsx b/dotcom-rendering/src/components/MultiImageBlockComponent.stories.tsx
index 5c068242595..b3d110d1785 100644
--- a/dotcom-rendering/src/components/MultiImageBlockComponent.stories.tsx
+++ b/dotcom-rendering/src/components/MultiImageBlockComponent.stories.tsx
@@ -144,3 +144,20 @@ export const GridOfFourWithCaption = () => {
 	);
 };
 GridOfFourWithCaption.storyName = 'grid of four with caption';
+
+export const Slideshow = () => {
+	return (
+		<Section showTopBorder={false} showSideBorders={false}>
+			<MultiImageBlockComponent
+				format={{
+					display: ArticleDisplay.Standard,
+					design: ArticleDesign.Standard,
+					theme: Pillar.News,
+				}}
+				images={fourImages}
+				presentation="slideshow"
+			/>
+		</Section>
+	);
+};
+Slideshow.storyName = 'slideshow';
diff --git a/dotcom-rendering/src/components/MultiImageBlockComponent.tsx b/dotcom-rendering/src/components/MultiImageBlockComponent.tsx
index c4c1b89927b..88de111dcef 100644
--- a/dotcom-rendering/src/components/MultiImageBlockComponent.tsx
+++ b/dotcom-rendering/src/components/MultiImageBlockComponent.tsx
@@ -5,11 +5,15 @@ import type { ImageBlockElement } from '../types/content';
 import { Caption } from './Caption';
 import { GridItem } from './GridItem';
 import { ImageComponent } from './ImageComponent';
+import { SlideshowCarousel } from './SlideshowCarousel.importable';
+import { getLargest, getMaster } from '../lib/image';
+import { Island } from './Island';
 
 type Props = {
 	images: ImageBlockElement[];
 	format: ArticleFormat;
 	caption?: string;
+	presentation?: 'slideshow' | 'side-by-side' | 'stacked';
 };
 
 const ieFallback = css`
@@ -102,6 +106,14 @@ const GridOfFour = ({ children }: { children: React.ReactNode }) => (
 	</div>
 );
 
+const removeLastFullStop = (text?: string) => {
+	if (!text) return text;
+	if (text.endsWith('.')) {
+		return text.slice(0, -1);
+	}
+	return text;
+};
+
 const OneImage = ({
 	images,
 	format,
@@ -110,23 +122,26 @@ const OneImage = ({
 	images: [ImageBlockElement];
 	format: ArticleFormat;
 	caption?: string;
-}) => (
-	<div css={wrapper}>
-		<ImageComponent
-			format={format}
-			element={images[0]}
-			hideCaption={true}
-			role={images[0].role}
-		/>
-		{!!caption && (
-			<Caption
+}) => {
+	const captionToUse = caption || removeLastFullStop(images[0].data.caption);
+	return (
+		<div css={wrapper}>
+			<ImageComponent
 				format={format}
-				captionText={caption}
-				shouldLimitWidth={false}
+				element={images[0]}
+				hideCaption={true}
+				role={images[0].role}
 			/>
-		)}
-	</div>
-);
+			{!!captionToUse && (
+				<Caption
+					format={format}
+					captionText={captionToUse}
+					shouldLimitWidth={false}
+				/>
+			)}
+		</div>
+	);
+};
 
 const TwoImage = ({
 	images,
@@ -136,35 +151,44 @@ const TwoImage = ({
 	images: [ImageBlockElement, ImageBlockElement];
 	format: ArticleFormat;
 	caption?: string;
-}) => (
-	<div css={wrapper}>
-		<SideBySideGrid>
-			<GridItem area="first">
-				<ImageComponent
-					element={images[0]}
+}) => {
+	const captionLeft =
+		images[0].data.caption &&
+		`${removeLastFullStop(images[0].data.caption)} (above left).  `;
+	const captionRight =
+		images[1].data.caption &&
+		`${removeLastFullStop(images[1].data.caption)} (above right).  `;
+	const captionToUse = caption || `${captionLeft ?? ''}${captionRight ?? ''}`;
+	return (
+		<div css={wrapper}>
+			<SideBySideGrid>
+				<GridItem area="first">
+					<ImageComponent
+						element={images[0]}
+						format={format}
+						hideCaption={true}
+						role={images[0].role}
+					/>
+				</GridItem>
+				<GridItem area="second">
+					<ImageComponent
+						element={images[1]}
+						format={format}
+						hideCaption={true}
+						role={images[1].role}
+					/>
+				</GridItem>
+			</SideBySideGrid>
+			{!!captionToUse && (
+				<Caption
+					captionText={captionToUse}
 					format={format}
-					hideCaption={true}
-					role={images[0].role}
+					shouldLimitWidth={false}
 				/>
-			</GridItem>
-			<GridItem area="second">
-				<ImageComponent
-					element={images[1]}
-					format={format}
-					hideCaption={true}
-					role={images[1].role}
-				/>
-			</GridItem>
-		</SideBySideGrid>
-		{!!caption && (
-			<Caption
-				captionText={caption}
-				format={format}
-				shouldLimitWidth={false}
-			/>
-		)}
-	</div>
-);
+			)}
+		</div>
+	);
+};
 
 const ThreeImage = ({
 	images,
@@ -174,43 +198,59 @@ const ThreeImage = ({
 	images: [ImageBlockElement, ImageBlockElement, ImageBlockElement];
 	format: ArticleFormat;
 	caption?: string;
-}) => (
-	<div css={wrapper}>
-		<OneAboveTwoGrid>
-			<GridItem area="first">
-				<ImageComponent
-					element={images[0]}
+}) => {
+	const captionTop =
+		images[0].data.caption &&
+		`${removeLastFullStop(images[0].data.caption)} (top).  `;
+	const captionBottomLeft =
+		images[1].data.caption &&
+		`${removeLastFullStop(images[1].data.caption)} (bottom left).  `;
+	const captionBottomRight =
+		images[2].data.caption &&
+		`${removeLastFullStop(images[2].data.caption)} (bottom right).  `;
+	const captionToUse =
+		caption ||
+		`${captionTop ?? ''}${captionBottomLeft ?? ''}${
+			captionBottomRight ?? ''
+		}`;
+	return (
+		<div css={wrapper}>
+			<OneAboveTwoGrid>
+				<GridItem area="first">
+					<ImageComponent
+						element={images[0]}
+						format={format}
+						hideCaption={true}
+						role={images[0].role}
+					/>
+				</GridItem>
+				<GridItem area="second">
+					<ImageComponent
+						element={images[1]}
+						format={format}
+						hideCaption={true}
+						role={images[1].role}
+					/>
+				</GridItem>
+				<GridItem area="third">
+					<ImageComponent
+						element={images[2]}
+						format={format}
+						hideCaption={true}
+						role={images[2].role}
+					/>
+				</GridItem>
+			</OneAboveTwoGrid>
+			{!!captionToUse && (
+				<Caption
+					captionText={captionToUse}
 					format={format}
-					hideCaption={true}
-					role={images[0].role}
+					shouldLimitWidth={false}
 				/>
-			</GridItem>
-			<GridItem area="second">
-				<ImageComponent
-					element={images[1]}
-					format={format}
-					hideCaption={true}
-					role={images[1].role}
-				/>
-			</GridItem>
-			<GridItem area="third">
-				<ImageComponent
-					element={images[2]}
-					format={format}
-					hideCaption={true}
-					role={images[2].role}
-				/>
-			</GridItem>
-		</OneAboveTwoGrid>
-		{!!caption && (
-			<Caption
-				captionText={caption}
-				format={format}
-				shouldLimitWidth={false}
-			/>
-		)}
-	</div>
-);
+			)}
+		</div>
+	);
+};
 
 const FourImage = ({
 	images,
@@ -225,88 +265,153 @@ const FourImage = ({
 	];
 	format: ArticleFormat;
 	caption?: string;
-}) => (
-	<div css={wrapper}>
-		<GridOfFour>
-			<GridItem area="first">
-				<ImageComponent
-					element={images[0]}
-					format={format}
-					hideCaption={true}
-					role={images[0].role}
-				/>
-			</GridItem>
-			<GridItem area="second">
-				<ImageComponent
-					element={images[1]}
+}) => {
+	const captionTopLeft =
+		images[0].data.caption &&
+		`${removeLastFullStop(images[0].data.caption)} (top left).  `;
+	const captionTopRight =
+		images[1].data.caption &&
+		`${removeLastFullStop(images[1].data.caption)} (top right).  `;
+	const captionBottomLeft =
+		images[2].data.caption &&
+		`${removeLastFullStop(images[2].data.caption)} (bottom left).  `;
+	const captionBottomRight =
+		images[3].data.caption &&
+		`${removeLastFullStop(images[3].data.caption)} (bottom right).  `;
+	const captionToUse =
+		caption ||
+		`${captionTopLeft ?? ''}${captionTopRight ?? ''}${
+			captionBottomLeft ?? ''
+		}${captionBottomRight ?? ''}`;
+	return (
+		<div css={wrapper}>
+			<GridOfFour>
+				<GridItem area="first">
+					<ImageComponent
+						element={images[0]}
+						format={format}
+						hideCaption={true}
+						role={images[0].role}
+					/>
+				</GridItem>
+				<GridItem area="second">
+					<ImageComponent
+						element={images[1]}
+						format={format}
+						hideCaption={true}
+						role={images[1].role}
+					/>
+				</GridItem>
+				<GridItem area="third">
+					<ImageComponent
+						element={images[2]}
+						format={format}
+						hideCaption={true}
+						role={images[2].role}
+					/>
+				</GridItem>
+				<GridItem area="forth">
+					<ImageComponent
+						element={images[3]}
+						format={format}
+						hideCaption={true}
+						role={images[3].role}
+					/>
+				</GridItem>
+			</GridOfFour>
+			{!!captionToUse && (
+				<Caption
+					captionText={captionToUse}
 					format={format}
-					hideCaption={true}
-					role={images[1].role}
+					shouldLimitWidth={false}
 				/>
-			</GridItem>
-			<GridItem area="third">
-				<ImageComponent
-					element={images[2]}
-					format={format}
-					hideCaption={true}
-					role={images[2].role}
-				/>
-			</GridItem>
-			<GridItem area="forth">
-				<ImageComponent
-					element={images[3]}
-					format={format}
-					hideCaption={true}
-					role={images[3].role}
+			)}
+		</div>
+	);
+};
+
+const Slideshow = ({
+	images,
+	format,
+	caption,
+}: {
+	images: ImageBlockElement[];
+	format: ArticleFormat;
+	caption?: string;
+}) => {
+	const imagesForSlideshow = images.map((element) => {
+		/** Legacy images do not have a master so we fallback to the largest available */
+		const image =
+			getMaster(element.media.allImages) ??
+			getLargest(element.media.allImages);
+		return {
+			imageSrc: image?.url ?? '',
+			imageCaption: element.data.caption,
+		};
+	});
+	return (
+		<>
+			<Island priority="feature" defer={{ until: 'visible' }}>
+				<SlideshowCarousel
+					images={imagesForSlideshow}
+					imageSize="large"
+					hasNavigationBackgroundColour={false}
+					linkTo="https://www.theguardian.com"
+					linkAriaLabel="news | group-3 | card-@1 | media-slideshow"
+					dataLinkName="slideshow-carousel-1"
 				/>
-			</GridItem>
-		</GridOfFour>
-		{!!caption && (
-			<Caption
-				captionText={caption}
-				format={format}
-				shouldLimitWidth={false}
-			/>
-		)}
-	</div>
-);
+			</Island>
+		</>
+	);
+};
 
 export const MultiImageBlockComponent = ({
 	images,
 	format,
 	caption,
+	presentation,
 }: Props) => {
-	const [one, two, three, four] = images;
+	if (presentation && presentation === 'slideshow') {
+		return <Slideshow images={images} format={format} caption={caption} />;
+	} else {
+		const [one, two, three, four] = images;
 
-	if (one && two && three && four) {
-		return (
-			<FourImage
-				images={[one, two, three, four]}
-				format={format}
-				caption={caption}
-			/>
-		);
-	}
+		if (one && two && three && four) {
+			return (
+				<FourImage
+					images={[one, two, three, four]}
+					format={format}
+					caption={caption}
+				/>
+			);
+		}
 
-	if (one && two && three) {
-		return (
-			<ThreeImage
-				images={[one, two, three]}
-				format={format}
-				caption={caption}
-			/>
-		);
-	}
+		if (one && two && three) {
+			return (
+				<ThreeImage
+					images={[one, two, three]}
+					format={format}
+					caption={caption}
+				/>
+			);
+		}
 
-	if (one && two) {
-		return (
-			<TwoImage images={[one, two]} format={format} caption={caption} />
-		);
-	}
+		if (one && two) {
+			return (
+				<TwoImage
+					images={[one, two]}
+					format={format}
+					caption={caption}
+				/>
+			);
+		}
 
-	if (one) {
-		return <OneImage images={[one]} format={format} caption={caption} />;
-	}
+		if (one) {
+			return (
+				<OneImage images={[one]} format={format} caption={caption} />
+			);
+		}
 
-	return null;
+		return null;
+	}
 };
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index ba05d3e81f5..10868ad50cb 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -2935,6 +2935,14 @@
                 },
                 "role": {
                     "$ref": "#/definitions/RoleType"
+                },
+                "presentation": {
+                    "enum": [
+                        "side-by-side",
+                        "slideshow",
+                        "stacked"
+                    ],
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index a04b2026e0a..1d39554cce3 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -568,6 +568,7 @@ export const renderElement = ({
 					key={index}
 					images={element.images}
 					caption={element.caption}
+					presentation={element.presentation}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.NewsletterSignupBlockElement':
diff --git a/dotcom-rendering/src/lib/thrift/nativeConnection.ts b/dotcom-rendering/src/lib/thrift/nativeConnection.ts
index 3b1ab0659f5..97e112b9508 100644
--- a/dotcom-rendering/src/lib/thrift/nativeConnection.ts
+++ b/dotcom-rendering/src/lib/thrift/nativeConnection.ts
@@ -124,7 +124,7 @@ export class NativeConnection extends ThriftConnection {
 				resolve: res,
 				reject: rej,
 				timeoutId: setTimeout(function () {
-					connection.reset(id);
+					// connection.reset(id);
 				}, ACTION_TIMEOUT_MS),
 			});
 			const message: NativeMessage = {
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 97c8187254a..0dfe9cba990 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -2423,6 +2423,14 @@
                 },
                 "role": {
                     "$ref": "#/definitions/RoleType"
+                },
+                "presentation": {
+                    "enum": [
+                        "side-by-side",
+                        "slideshow",
+                        "stacked"
+                    ],
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/model/enhance-images.ts b/dotcom-rendering/src/model/enhance-images.ts
index 44024de18db..36a4ed9b3b8 100644
--- a/dotcom-rendering/src/model/enhance-images.ts
+++ b/dotcom-rendering/src/model/enhance-images.ts
@@ -454,7 +454,7 @@ const enhance =
 				.addMultiImageElements()
 				// If any MultiImageBlockElement is followed by a ul/l caption, delete the special caption
 				// element and use the value for the multi image `caption` prop
-				.addCaptionsToMultis()
+				// .addCaptionsToMultis()
 				.addImagePositions(imagesForLightbox).elements
 		);
 	};
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 3fbd75dcc98..5fef2a8a838 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -464,6 +464,7 @@ export interface MultiImageBlockElement {
 	images: ImageBlockElement[];
 	caption?: string;
 	role?: RoleType;
+	presentation?: 'slideshow' | 'side-by-side' | 'stacked';
 }
 
 export interface NewsletterSignupBlockElement {