Editorial Slideshow

Editorial Slideshow

A dominant image beside a separate editorial story column, with progress bars and bare arrow controls. On narrow hosts the story becomes a compact footer. The default Soft Horizons series shows a fictional AI composer, research workspace and glass orb in a pastel flowering meadow. Product interfaces in the artwork are static illustrations. showNavigation controls arrows; showIndicators controls progress bars. The story column always shows captions and scrolls when text exceeds the available space. Image changes coordinate a caption fade and 8px rise, capped at 280ms or the configured duration. This skips when paused, hidden, reduced motion, zero duration or None.

import {EditorialSlideshow} from './components/editorial-slideshow';
<EditorialSlideshow heightMode="fixed" height={560} transition="blur" autoplay={true} />

Default bundled image keys: soft-horizons, research-workspace, glass-in-bloom.

The component fills its parent width. heightMode="fill" fills a parent with an explicit height; an unsized host uses a 16:10 aspect-ratio fallback. heightMode="fixed" uses the pixel height. imageFit, focalX, focalY and imageScale control the main image crop. Image, title, description and alt lists correspond by index. Use an empty alt for a decorative image. Lists support up to twelve slides.

images accepts the bundled keys listed above, the original vector keys canyon, coast, alpine, HTTP/HTTPS URLs and relative paths. Invalid or empty image lists fall back to the default images. Remote URLs make ordinary requests to their hosts. Failed images show a readable unavailable message. Generated images depict fictional scenes; no claim of a real building, place or product is implied.

Choose one of eight transitions: blur, fade, slide, slideUp, cover, wipe, zoom or none. duration controls finite motion; zero makes changes immediate. blurAmount controls blur strength and zoomAmount controls zoom distance. Rapid changes retarget owned image layers and settle to one slide.

ArrowLeft/Right, Home/End and horizontal swipes navigate. Manual changes are announced; automatic announcements are disabled during playback. Autoplay is on by default at five seconds. There is no on-image playback button. Disable Autoplay in Tweaks or set autoplay={false}. Hover, keyboard focus, hidden documents, offscreen placement and reduced motion stop automatic progression. Reduced motion makes manual navigation immediate.

The vanilla core exports defaults, resolveSettings, render and mount. mount(host, settings) returns update, goTo, pause, resume and destroy. update merges validated settings and preserves the current slide where possible. pause stops autoplay and settles finite transitions; resume allows animation without enabling autoplay. destroy removes owned DOM, listeners, observer and animation frames. Multiple instances have independent state. The React wrapper accepts className, style and paused in addition to the generated settings below.

Server/no-JavaScript markup shows the first image and readable captions where present. Navigation requires JavaScript. Configured React and HTML delivery retain settings. Every install includes its local engine, CSS, photographs, vectors, Instrument Sans font and licences; there are no runtime npm dependencies or imports from sibling components. Font rights are OFL-1.1 under assets/OFL-InstrumentSans.txt.