Restore optimized homepage carousel

css/site.css

@@ -22,6 +22,133 @@ body.custom-background { background-color: #ffffff; }
     width: 100%;
 }
 
+/* Lightweight homepage carousel with a fixed aspect ratio to prevent layout shift. */
+.home-carousel {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  aspect-ratio: 24 / 7;
+  margin: 30px auto 38px;
+  overflow: hidden;
+  background: #f7f7f2;
+}
+
+.home-carousel-track,
+.home-carousel-slide,
+.home-carousel-slide > a,
+.home-carousel-slide picture {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+.home-carousel-slide {
+  z-index: 0;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 500ms ease;
+}
+
+.home-carousel-slide.is-active {
+  z-index: 1;
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.home-carousel-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.home-carousel-caption {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  bottom: 0;
+  padding: 14px 22px;
+  color: #0e2012;
+  background: rgba(252, 250, 250, 0.82);
+  font-family: "Bebas Neue";
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.home-carousel-control,
+.home-carousel-dots button {
+  border: 0;
+  cursor: pointer;
+}
+
+.home-carousel-control {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 48px;
+  margin: 0;
+  padding: 0 0 4px;
+  border-radius: 0;
+  color: #fff;
+  background: rgba(19, 18, 17, 0.62);
+  font: 42px/1 Arial, sans-serif;
+  transform: translateY(-50%);
+  transition: background-color 180ms ease;
+}
+
+.home-carousel-control:hover {
+  background: rgba(19, 18, 17, 0.86);
+}
+
+.home-carousel-previous {
+  left: 14px;
+}
+
+.home-carousel-next {
+  right: 14px;
+}
+
+.home-carousel-dots {
+  position: absolute;
+  z-index: 3;
+  right: 16px;
+  bottom: 14px;
+  display: flex;
+  gap: 8px;
+}
+
+.home-carousel-dots button {
+  width: 11px;
+  height: 11px;
+  margin: 0;
+  padding: 0;
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  border-radius: 50%;
+  background: rgba(19, 18, 17, 0.45);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.home-carousel-dots button.is-active {
+  background: #89c76b;
+}
+
+.home-carousel-control:focus-visible,
+.home-carousel-dots button:focus-visible {
+  outline: 3px solid #89c76b;
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home-carousel-slide {
+    transition: none;
+  }
+}
+
 /* Mobile-specific fix for the header image */
 @media (max-width: 768px) {
     #bg_image {
@@ -30,6 +157,34 @@ body.custom-background { background-color: #ffffff; }
         width: 100%; /* Let the image adjust to screen width */
         height: auto; /* Maintain aspect ratio */
     }
+
+    .home-carousel {
+      margin: 15px auto 24px;
+    }
+
+    .home-carousel-control {
+      width: 34px;
+      height: 40px;
+      font-size: 34px;
+    }
+
+    .home-carousel-previous {
+      left: 8px;
+    }
+
+    .home-carousel-next {
+      right: 8px;
+    }
+
+    .home-carousel-caption {
+      padding: 8px 12px;
+      font-size: 17px;
+    }
+
+    .home-carousel-dots {
+      right: 10px;
+      bottom: 9px;
+    }
 }
 /* Shortcodes Ultimate column rule used by exported content. */
 .su-column-size-1-4{

js/home-carousel.js

@@ -0,0 +1,72 @@
+(function () {
+  "use strict";
+
+  var carousel = document.querySelector("[data-home-carousel]");
+  if (!carousel) return;
+
+  var slides = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-slide]"));
+  var dots = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-dot]"));
+  var previous = carousel.querySelector("[data-carousel-previous]");
+  var next = carousel.querySelector("[data-carousel-next]");
+  var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  var current = 0;
+  var timer = null;
+
+  function show(index) {
+    current = (index + slides.length) % slides.length;
+
+    slides.forEach(function (slide, slideIndex) {
+      var active = slideIndex === current;
+      var link = slide.querySelector("a");
+      slide.classList.toggle("is-active", active);
+      slide.setAttribute("aria-hidden", active ? "false" : "true");
+      if (link) link.setAttribute("tabindex", active ? "0" : "-1");
+    });
+
+    dots.forEach(function (dot, dotIndex) {
+      var active = dotIndex === current;
+      dot.classList.toggle("is-active", active);
+      dot.setAttribute("aria-current", active ? "true" : "false");
+    });
+  }
+
+  function stop() {
+    if (timer) window.clearInterval(timer);
+    timer = null;
+  }
+
+  function start() {
+    stop();
+    if (!reduceMotion && slides.length > 1 && !document.hidden) {
+      timer = window.setInterval(function () {
+        show(current + 1);
+      }, 5000);
+    }
+  }
+
+  previous.addEventListener("click", function () {
+    show(current - 1);
+    start();
+  });
+
+  next.addEventListener("click", function () {
+    show(current + 1);
+    start();
+  });
+
+  dots.forEach(function (dot, dotIndex) {
+    dot.addEventListener("click", function () {
+      show(dotIndex);
+      start();
+    });
+  });
+
+  carousel.addEventListener("mouseenter", stop);
+  carousel.addEventListener("mouseleave", start);
+  carousel.addEventListener("focusin", stop);
+  carousel.addEventListener("focusout", start);
+  document.addEventListener("visibilitychange", start);
+
+  show(0);
+  start();
+})();

src/components/SiteLayout.astro

@@ -54,7 +54,7 @@ const metaTitle = title
     <link rel="stylesheet" id="parabola-fonts-css" href="/assets/theme/parabola/fonts/fontfaces.css?ver=2.4.1-perf1" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-style-css" href="/assets/theme/parabola/style.css?ver=2.4.1" type="text/css" media="all" />
     <link rel="stylesheet" id="familyfedie-theme-css" href="/css/theme.css" type="text/css" media="all" />
-    <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css?ver=20260710-2" type="text/css" media="all" />
+    <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css?ver=20260710-3" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-mobile-css" href="/assets/theme/parabola/styles/style-mobile.css?ver=2.4.1" type="text/css" media="all" />
     {plausibleDomain && <script defer data-domain={plausibleDomain} src={plausibleScriptSrc}></script>}
     <script is:inline defer type="text/javascript" src="/js/jquery.min.js?ver=2.0.2" id="jquery-js"></script>

src/content/pages/index.html

@@ -4,6 +4,43 @@
 		<div style="clear:both;"> </div>
 
 	<div id="frontpage">
+		<section class="home-carousel" data-home-carousel aria-label="Featured highlights" aria-roledescription="carousel">
+			<div class="home-carousel-track" aria-live="off">
+				<article class="home-carousel-slide is-active" data-carousel-slide aria-label="1 of 3" aria-roledescription="slide" aria-hidden="false">
+					<a href="/the-founders.html">
+						<picture>
+							<source type="image/webp" srcset="/assets/uploads/2013/10/TrueParentsSlider-640.webp 640w, /assets/uploads/2013/10/TrueParentsSlider-1050.webp 1050w" sizes="(max-width: 1050px) 100vw, 1050px" />
+							<img src="/assets/uploads/2013/10/TrueParentsSlider.jpg" alt="Rev. Sun Myung Moon and Dr. Hak Ja Han Moon" width="1200" height="350" fetchpriority="high" />
+						</picture>
+					</a>
+				</article>
+				<article class="home-carousel-slide" data-carousel-slide aria-label="2 of 3" aria-roledescription="slide" aria-hidden="true">
+					<a href="/about-us-organizations.html" tabindex="-1">
+						<picture>
+							<source type="image/webp" srcset="/assets/uploads/2013/10/Little-Angels-Presentationlight1-640.webp 640w, /assets/uploads/2013/10/Little-Angels-Presentationlight1-1050.webp 1050w" sizes="(max-width: 1050px) 100vw, 1050px" />
+							<img src="/assets/uploads/2013/10/Little-Angels-Presentationlight1.jpg" alt="The Little Angels children's folk ballet performance" width="1200" height="350" loading="lazy" decoding="async" />
+						</picture>
+						<span class="home-carousel-caption">The Little Angels</span>
+					</a>
+				</article>
+				<article class="home-carousel-slide" data-carousel-slide aria-label="3 of 3" aria-roledescription="slide" aria-hidden="true">
+					<a href="/the-founders.html" tabindex="-1">
+						<picture>
+							<source type="image/webp" srcset="/assets/uploads/2013/10/father-Seung-Hwa_Presentation-640.webp 640w, /assets/uploads/2013/10/father-Seung-Hwa_Presentation-1050.webp 1050w" sizes="(max-width: 1050px) 100vw, 1050px" />
+							<img src="/assets/uploads/2013/10/father-Seung-Hwa_Presentation.jpg" alt="Rev. Sun Myung Moon" width="1200" height="350" loading="lazy" decoding="async" />
+						</picture>
+						<span class="home-carousel-caption">Rev. Sun Myung Moon</span>
+					</a>
+				</article>
+			</div>
+			<button class="home-carousel-control home-carousel-previous" type="button" data-carousel-previous aria-label="Previous image">&#8249;</button>
+			<button class="home-carousel-control home-carousel-next" type="button" data-carousel-next aria-label="Next image">&#8250;</button>
+			<div class="home-carousel-dots" aria-label="Choose an image">
+				<button class="is-active" type="button" data-carousel-dot="0" aria-label="Show image 1" aria-current="true"></button>
+				<button type="button" data-carousel-dot="1" aria-label="Show image 2" aria-current="false"></button>
+				<button type="button" data-carousel-dot="2" aria-label="Show image 3" aria-current="false"></button>
+			</div>
+		</section>
 		<div id="front-columns">
 		
 		<div class="ppcolumn column1" id="column1">
@@ -11,7 +48,7 @@
 									<div class="column-image">
 					 <picture>
 						<source type="image/webp" srcset="/assets/uploads/2013/10/True_Parents-336.webp 336w, /assets/uploads/2013/10/True_Parents-483.webp 483w" sizes="(max-width: 800px) 100vw, 336px" />
-						<img src="/assets/uploads/2013/10/True_Parents.jpg" id="columnImage1" alt="Rev. Sun Myung Moon and Dr. Hak Ja Han Moon, founders of FFWPU International" width="483" height="329" decoding="async" />
+						<img src="/assets/uploads/2013/10/True_Parents.jpg" id="columnImage1" alt="Rev. Sun Myung Moon and Dr. Hak Ja Han Moon, founders of FFWPU International" width="483" height="329" fetchpriority="high" decoding="async" />
 					 </picture>
 													<h3 class='column-header-image'>Founders of FFWPU International</h3>
 											</div>

src/pages/index.astro

@@ -14,5 +14,16 @@ const normalizedMainHtml = normalizeInternalHtmlLinks(mainHtml);
   canonical="/index"
   parabolaSettings={{ masonry: "0", magazine: "0", mobile: "1", fitvids: "1" }}
 >
+  <link
+    slot="head"
+    rel="preload"
+    as="image"
+    type="image/webp"
+    href="/assets/uploads/2013/10/TrueParentsSlider-1050.webp"
+    imagesrcset="/assets/uploads/2013/10/TrueParentsSlider-640.webp 640w, /assets/uploads/2013/10/TrueParentsSlider-1050.webp 1050w"
+    imagesizes="(max-width: 1050px) 100vw, 1050px"
+    fetchpriority="high"
+  />
   <Fragment set:html={normalizedMainHtml} />
+  <script is:inline defer slot="scripts" src="/js/home-carousel.js?ver=20260710-1"></script>
 </SiteLayout>