This guide explains how to use Rotating Images (often referred to as Slideshows or Hero banners) to create dynamic, engaging content on your website. In Umbraco 17+, managing these visual elements is faster and more stable thanks to its foundation on .NET 10 LTS and a matured "Bellissima" back office architecture.
Rotating Images as Components
In the uSkinned Site Builder for Umbraco 17+, rotating images are added as modular components rather than being hard-coded into a template. Using the Visual Editor, you can see a real-time preview of your slideshow as you edit, allowing you to check how images rotate and scale across different screen sizes before you ever hit publish.
When to Use Rotating Images
Dynamic image sliders are ideal for capturing attention or displaying multiple related items in a compact space:
- Hero Banners: Use a sequence of high-impact images on your homepage to introduce different sections of your site.
- Product Galleries: Showcase a single product from multiple angles or in different environments.
- Partner/Client Logos: Create a subtle, rotating carousel of brands you work with to build trust.
- Content Teasers: Rotate through your latest blog posts or featured services to keep the landing page fresh.
Watch: Creating Dynamic Sliders in Umbraco 17+
This video walkthrough demonstrates how to add a Slideshow component, upload multiple images to the rotation, and customize transition effects using the Visual Editor.
Other Related Tutorials
- [Tutorial] How to add or edit a component to a page or blog post
- [Tutorial] How to create content with the Visual Editor
- [Tutorial] How to edit the crop and focus point of an image
- [Tutorial] How to change the quality of an image
Action Steps to Create Rotating Images
- Select Your Page: In the Umbraco 17+ content tree, find the page where you want the rotating images to appear.
- Open the Visual Editor: Click the Visual Editor tab to enter the live editing mode.
- Add a Slideshow Component: Click "Add Component" and select a "Slideshow" or "Gallery" (with slider layout) from the component library.
- Upload and Configure: Add your images. For each one, you can set custom focal points to ensure the most important part of the image is never cropped out during the rotation.
- Save and Publish: Once satisfied with the preview, publish the page. In Umbraco 17, the load-balanced backoffice ensures these updates are instantly synchronized across all servers.
Pro-Tip: Leverage the performance of .NET 10 LTS for high-resolution images. Umbraco 17 processes image crops and quality adjustments more efficiently, meaning your rotating banners will load faster for users without sacrificing visual clarity.