adding fixed height setting and removing sample carousel addition

Author: kgeller

docs/contribute/index.md

@@ -8,24 +8,6 @@ Welcome, **contributor**!
 
 Whether you're a technical writer or you've only edited Elastic docs once or twice, you're a valued contributor. Every word matters!
 
-::::{carousel}
-:id: nested-carousel-example
-:controls: true
-:indicators: true
-:::{image} https://epr.elastic.co/package/abnormal_security/1.8.0/img/abnormal_security-mailbox_not_analyzed_overview.png
-:alt: First image description
-:title: First image title
-:::
-:::{image} https://epr.elastic.co/package/abnormal_security/1.8.0/img/abnormal_security-ai_security_mailbox_overview.png
-:alt: Second image description
-:title: Second image title
-:::
-:::{image} https://epr.elastic.co/package/abnormal_security/1.8.0/img/abnormal_security-audit_overview.png
-:alt: Third image description
-:title: Third image title
-:::
-::::
-
 ## Contribute to the docs [#contribute]
 
 The version of the docs you want to contribute to determines the tool and syntax you must use to update the docs.

src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css

@@ -8,7 +8,7 @@
 .carousel-track {
   width: 100%;
   position: relative;
-  min-height: 200px; /* Ensure container has height even when slides are absolute */
+  min-height: 200px;
 }
 
 .carousel-slide {
@@ -92,6 +92,39 @@
   background-color: black;
 }
 
+/* Fixed height carousel styles */
+.carousel-container[data-fixed-height] .carousel-track {
+  min-height: auto;
+  overflow: hidden;
+}
+
+.carousel-container[data-fixed-height] .carousel-slide {
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.carousel-container[data-fixed-height] .carousel-slide[data-active="true"] {
+  position: relative;
+  height: 100%;
+  top: auto;
+  left: auto;
+}
+
+.carousel-container[data-fixed-height] .carousel-image-reference {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-container[data-fixed-height] .carousel-image-reference img {
+  width: auto;
+  height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  object-position: center;
+}
 @media (max-width: 768px) {
   .carousel-control {
     width: 30px;

src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs

@@ -127,7 +127,8 @@ private static void WriteImageCarousel(HtmlRenderer renderer, ImageCarouselBlock
 				ImageUrl = img.ImageUrl
 			}).ToList(),
 			ShowControls = block.ShowControls,
-			ShowIndicators = block.ShowIndicators
+			ShowIndicators = block.ShowIndicators,
+			FixedHeight = block.FixedHeight
 		});
 		RenderRazorSlice(slice, renderer);
 	}

src/Elastic.Markdown/Myst/Directives/ImageCarouselBlock.cs

@@ -16,6 +16,7 @@ public class ImageCarouselBlock(DirectiveBlockParser parser, ParserContext conte
 	public string? Id { get; set; }
 	public bool? ShowControls { get; set; }
 	public bool? ShowIndicators { get; set; }
+	public string? FixedHeight { get; set; }
 
 	public override string Directive => "carousel";
 
@@ -25,6 +26,7 @@ public override void FinalizeAndValidate(ParserContext context)
 		Id = Prop("id");
 		ShowControls = TryPropBool("controls");
 		ShowIndicators = TryPropBool("indicators");
+		FixedHeight = Prop("fixed-height");
 
 		// Process child image blocks directly
 		foreach (var block in this)

src/Elastic.Markdown/Slices/Directives/ImageCarousel.cshtml

@@ -1,6 +1,10 @@
 @inherits RazorSlice<ImageCarouselViewModel>
-<div class="carousel-container" id="@Model.Id">
-    <div class="carousel-track">
+@{
+    var hasFixedHeight = !string.IsNullOrEmpty(Model.FixedHeight);
+    var trackStyle = hasFixedHeight ? $"height: {Model.FixedHeight};" : "";
+}
+<div class="carousel-container" id="@Model.Id" @(hasFixedHeight ? "data-fixed-height" : "")>
+    <div class="carousel-track" style="@trackStyle">
         @for (int i = 0; i < Model.Images.Count; i++)
         {
             var image = Model.Images[i];

src/Elastic.Markdown/Slices/Directives/_ViewModels.cs

@@ -139,4 +139,5 @@ public class ImageCarouselViewModel : DirectiveViewModel
 	public required string Id { get; init; }
 	public bool? ShowControls { get; init; }
 	public bool? ShowIndicators { get; init; }
+	public string? FixedHeight { get; init; }
 }