A slideshow across a page: pictures the full width of the screen, captions over them

slideshow on a page: max_height in svh, slides with an image (a path
in the content repo or https), a caption laid over the picture's foot,
and optionally the picture's size so its place is held before it
loads. Swiper upgrades it; before that it is a row that scrolls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt

src/app.rs

@@ -369,7 +369,7 @@ fn QuestionView(
     // Swiper Element only registers its custom elements when its
     // (vendored, ~180KB) script runs - loaded once per page, and only
     // on pages where some alternative actually declares a deck.
-    let needs_swiper = question.alternatives.iter().any(|a| a.images.len() > 1);
+    let needs_swiper = question.slideshow.is_some() || question.alternatives.iter().any(|a| a.images.len() > 1);
     // MapLibre is vendored and large, so it loads only where a field
     // actually asks for a place, and only where this instance can
     // serve tiles at all.
@@ -397,6 +397,60 @@ fn QuestionView(
             site=site.clone()
             current_id=question_id.clone()
         />
+        // Pictures across the page: the full width of the screen, each
+        // as wide as its own shape at the strip's height, the caption
+        // laid over its foot. Inert until the Swiper bundle upgrades
+        // the elements; without it, a row that scrolls sideways.
+        {question
+            .slideshow
+            .clone()
+            .map(|show| {
+                let height = format!("--slideshow-height: {}svh", show.max_height);
+                view! {
+                    // In the page itself, so the strip works from the
+                    // server's HTML alone; the head's copy above covers
+                    // arriving here by a link within the site.
+                    <script src="/swiper-element-bundle.min.js" defer=true></script>
+                    <swiper-container
+                        class="slideshow"
+                        style=height
+                        slides-per-view="auto"
+                        space-between="6"
+                        grab-cursor="true"
+                        free-mode="true"
+                        mousewheel-force-to-axis="true"
+                        keyboard="true"
+                        navigation="true"
+                    >
+                        <For
+                            each=move || show.slides.clone().into_iter().enumerate().collect::<Vec<_>>()
+                            key=|(_, slide)| slide.image.clone()
+                            children=|(n, slide): (usize, crate::content::Slide)| {
+                                let caption = slide.caption.clone();
+                                // The first screenful loads with the
+                                // page; the rest when swiped to.
+                                let loading = if n < 4 { "eager" } else { "lazy" };
+                                view! {
+                                    <swiper-slide>
+                                        <figure class="slide">
+                                            <img
+                                                src=slide.src()
+                                                alt=slide.caption.clone()
+                                                width=slide.width.map(|w| w.to_string())
+                                                height=slide.height.map(|h| h.to_string())
+                                                loading=loading
+                                                decoding="async"
+                                            />
+                                            {(!caption.trim().is_empty()).then(|| view! { <figcaption>{caption}</figcaption> })}
+                                        </figure>
+                                    </swiper-slide>
+                                }
+                                .into_any()
+                            }
+                        />
+                    </swiper-container>
+                }
+            })}
         // A page that is about somewhere says where, under the
         // question: a still from this origin, and the place in words
         // for anyone who cannot see it.