Feature - Internal Links - Slideshow

Display selected pages as a Bootstrap carousel slideshow with thumbnails and captions

What It Does#

Displays selected pages as a Bootstrap carousel slideshow

The Internal Links - Slideshow feature presents a set of editor-selected pages as a full-width Bootstrap carousel. Each slide shows the page's thumbnail image with a caption overlay containing the page title, description, and a link to the page.

This is ideal for hero sections, featured content highlights, or any situation where you want to showcase multiple pages in an engaging, rotating presentation. The carousel auto-plays and includes prev/next controls and slide indicators.

The carousel displays up to 5 slides using Bootstrap's built-in carousel component with auto-play.

How It Works#

A Multi Node Tree Picker rendered as a Bootstrap carousel with captions

The view reads selected pages from the links Multi Node Tree Picker property, limited to a maximum of 5 items. Each page's pageThumbnail is rendered as a carousel slide image at 1296px width using GetCropUrl().

Captions are overlaid using Bootstrap's carousel-caption class with a semi-transparent background (bg-body-secondary bg-opacity-75) for readability over the image. Each caption includes the page title as a stretched link, the description, and a slide counter.

A unique carousel ID is generated using Guid.NewGuid() to ensure multiple slideshows on the same page don't conflict with each other's Bootstrap data attributes.

Captions are hidden on mobile using Bootstrap's d-none d-md-block utility classes.

On this page

Example Slideshow#

Selected pages displayed as a rotating carousel

featureInternalLinksSlideshow.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem>

@{
    Layout = "_Layout_Features.cshtml";
    var maxItems = 5;
    var guid = Guid.NewGuid().ToString();
    var carouselId = "carousel" + guid;
    var slides = Model.Content
        .Value<IEnumerable<IPublishedContent>>("links")
        ?.Take(maxItems).ToList()
        ?? new List<IPublishedContent>();
}

<div id="@carouselId" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        @for (int i = 0; i < slides.Count; i++)
        {
            <button data-bs-target="#@carouselId" data-bs-slide-to="@i"
                    class="@(i == 0 ? "active" : null)"></button>
        }
    </div>
    <div class="carousel-inner">
        @foreach (var item in slides) {
            // ... carousel-item with thumbnail + caption
        }
    </div>
    // ... prev/next controls
</div>