Image and Video Slideshows

Image and video slideshows present one item at a time in an immersive visual layout. Use them for product galleries, campaign pages and bold hero sections. With dynamic content, they can also automatically display posts, products and other content from Joomla, WordPress or WooCommerce.

Define the size of the slideshow with a custom aspect ratio, a minimum or maximum height, or let it fill the available space in its column. Match its height to the viewport and automatically subtract the space above or a section below to create full-screen hero slideshows that fit the viewport.

Choose how users navigate between slides. Add dot navigation, thumbnail navigation and previous-next arrows, position them inside or outside the slideshow, and show them only on hover for a cleaner appearance. The thumbnav provides a visual preview of every slide, supports custom thumbnail images and can shrink automatically to remain in a single row.

Each slide can also show text overlays. Choose their position and style, define their width and spacing, and animate the title, meta, content and link independently to create anything from subtle image captions to more editorial layouts.

Bring images and videos to life with slide, fade, scale, pull or push transitions. Control the transition speed, enable autoplay, set the interval between slides and add a Ken Burns effect for slow zooming and panning. Choose whether the slideshow loops continuously or stops when it reaches the final slide. You can also animate the overlay, title, meta, content and link at different speeds as the slides change.

Turn the slideshow into a scroll-based parallax animation with just a click and move through the slides as users scroll down the page. Combined with a sticky column, the slideshow can remain in view while scrolling progresses through the complete sequence.

Slideshows are fully responsive and support touch and swipe gestures, mouse dragging and accessible keyboard navigation. Automatically added WAI-ARIA roles, states and properties help screen readers identify the active slide and its controls.

Built-in image lazy loading prevents large slideshows from delaying the initial page load and improves overall performance. Images in off-screen slides load only as needed, while adjacent slides are preloaded so the next image is ready and navigation remains smooth.

This gives you the flexibility to create everything from compact product galleries to full-screen hero slideshows with responsive navigation, content overlays and motion effects.