P11Carousel Component

The P11Carousel is a high-end content slider designed for emotional hero sections. It supports advanced cinematic effects like Ken Burns, Parallax, and Blur Reveal. It is fully responsive, optimized for performance via hardware acceleration, and includes an optional glassmorphism progress indicator.

P11 UI Carousel - Auto-Loop Demo

1. Hero Slider (Images)

Entdecke die Natur

Wunderschöne Landschaften direkt vor deiner Haustür.

Moderne Architektur

Design, das Maßstäbe setzt und inspiriert.

Kulinarische Highlights

Genuss pur in jedem Bissen.

NEUHEIT 2026

2. Product Carousel (Colors & Icons)

📱

⌚

🎧

Produkt Blau

CHF 599.99

3. Modern Gallery (4 Slots)

4. Multi-Row Gallery (4x3 Grid - 12 Slots)

Testet 3 Zeilen mit dynamischer Spaltenanzahl und automatischer Bildwiederholung.

Pro Boot X1

Ab 129.00 €

Google

Microsoft

Apple

5. Selecting Focus Mode (Slot-based)

Nutzt das neue Slot-Konzept mit Zoom.

🏔️

5. Selecting Focus Mode (Slot-based)

Nutzt das neue Slot-Konzept mit Zoom.

Implementation

<div class="container mt-5">
    <h2>P11 UI Carousel - Auto-Loop Demo</h2>
    <hr />

    @* --- Beispiel 1: Hero Slider (Fokus auf Layer 1 Background) --- *@
    <div class="mb-5">
        <h4>1. Hero Slider (Images)</h4>
        @* <div class="p11-demo-wrapper" style="height: 400px; border-radius: 12px; overflow: hidden;"> *@

            <P11Carousel TItem="SlideData"
                         Items="_heroSlides"
                         AriaLabel="Slider"
                         IsFullScreen="true"
                     Animation="P11AnimationType.Zoom"
                         Type="P11CarouselType.Slider"
                         OverlayColor="Black"
                         OverlayOpacity="0.5"
                         ShowProgressBar="false"
                         AutoCycle=true
                         Interval="4000">

                <BackgroundTemplate Context="slide">
                    @* Layer 1: Das rotierende Bild mit Text *@
                    <div class="p11-hero-content" style="position: relative; width: 100%; height: 100%;">
                        <img src="@slide.ImageUrl" alt="@slide.Title" class="p11-hero-image" />
                        <div class="p11-hero-text-overlay" style="position: absolute; bottom: 40px; left: 40px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.7);">
                            <h1 style="font-weight: bold;">@slide.Title</h1>
                            <p style="font-size: 1.2rem;">@slide.Description</p>
                        </div>
                    </div>
                </BackgroundTemplate>

                <OverlayTemplate>
                    @* Layer 2: Ein statisches Element (z.B. ein Badge), das immer sichtbar bleibt *@
                    <div class="p11-static-badge" style="position: absolute; top: 20px; right: 20px; background: #ff3e00; color: white; padding: 10px 20px; border-radius: 50px; font-weight: bold;">
                        NEUHEIT 2026
                    </div>
                </OverlayTemplate>

            </P11Carousel>

        @* </div> *@
    </div>

    @* --- Beispiel 2: Product Slider (Fokus auf Custom Styling) --- *@
    <div>
        <h4>2. Product Carousel (Colors & Icons)</h4>
        @* <div class="p11-demo-wrapper" style="height: 300px; width: 500px; border-radius: 12px; overflow: hidden;"> *@

            <P11Carousel TItem="SlideData"
                         Items="_productSlides"
                         Type="P11CarouselType.Slider"
                         AriaLabel="Slider"
                         OverlayColor="Black"
                         OverlayOpacity="0.5"
                         Interval="2500">

                <BackgroundTemplate Context="product">
                    @* Layer 1: Produkt-Karte mit dynamischer Farbe *@
                    <div style="background-color: @product.HexColor; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
                        <span style="font-size: 5rem; margin-bottom: 50px;">@product.Icon</span>
                        @* <h3>@product.Title</h3>
                        <p style="font-size: 1.5rem; font-weight: bold;">@product.Price.ToString("C2")</p> *@
                    </div>
                </BackgroundTemplate>

            <OverlayTemplate Context="product">
                    @* Layer 2: Ein statischer Warenkorb-Button über allen Produkten *@
                    <div style="margin-top: 100px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
                        <h3>@product.Title</h3>
                        <p style="font-size: 1.5rem; font-weight: bold;">@product.Price.ToString("C2")</p>
                        <div style="position: absolute; bottom: 20px; right: 20px;">
                            <button class="btn btn-light shadow-sm">🛒 In den Warenkorb</button>
                        </div>
                    </div>
                </OverlayTemplate>

            </P11Carousel>

        @* </div> *@
    </div>

    <hr />

    @* --- Beispiel 3: Modern Gallery (4 synchrone Slots) --- *@
    <div class="container-fluid py-4">
        <h4 class="mb-3">3. Modern Gallery (4 Slots)</h4>

        @* <div class="rounded-4 overflow-hidden shadow-lg" style="height: 450px;"> *@

            <P11Carousel TItem="GalleryItem"
                         Items="_visualShowcase"
                         Type="P11CarouselType.Gallery"
                         AriaLabel="Gallery"
                         Interval="4000"
                         Animation="P11AnimationType.Zoom"
                         SkipValidation="true"
                         VisibleSlotsSm="1"
                         VisibleSlotsMd="2"
                         VisibleSlotsLg="4">

                <BackgroundTemplate Context="item">
                    @* Karte mit Hintergrundbild über Bootstrap Helper *@
                    <div class="h-100 w-100 d-flex flex-column justify-content-end p-4 text-white"
                         style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent), url('@item.MediaUrl'); background-size: cover; background-position: center;">

                        <div class="mb-2">
                            <span class="fs-1">@item.Symbol</span>
                        </div>
                        <h3 class="fw-bold mb-1">@item.Heading</h3>
                        <p class="opacity-75 mb-0">@item.SubHeading</p>
                    </div>
                </BackgroundTemplate>

                <OverlayTemplate>
                    @* Statisches Badge oben links *@
                    <div class="position-absolute top-0 start-0 m-3" style="z-index: 10;">
                        <span class="badge rounded-pill bg-danger shadow-sm">Live Showcase</span>
                    </div>
                </OverlayTemplate>

            </P11Carousel>

        @* </div> *@
    </div>

    @* --- Beispiel 4: Multi-Row Gallery (4x3 Grid) --- *@
    <div class="container-fluid py-4">
        <h3 class="mb-3">4. Multi-Row Gallery (4x3 Grid - 12 Slots)</h3>
        <p class="text-muted">Testet 3 Zeilen mit dynamischer Spaltenanzahl und automatischer Bildwiederholung.</p>

        @* Wir erhöhen die Höhe auf 750px, damit 3 Zeilen gut Platz finden *@
        <div class="rounded-4 overflow-hidden shadow-lg" style="background-color: #000;">

            <P11Carousel TItem="GalleryItem"
                         Items="_visualShowcase"
                         Type="P11CarouselType.Gallery"
                         AriaLabel="Gallery"
                         Interval="5000"
                         Rows="3"
                         Gap="2"
                         Animation="P11AnimationType.Zoom"
                         IsFullScreen="true"
                         VisibleSlotsSm="1"
                         VisibleSlotsMd="2"
                         VisibleSlotsLg="4">

                <BackgroundTemplate Context="item">
                    @* Jedes Grid-Element erhält ein individuelles Design *@
                    <div class="h-100 w-100 d-flex flex-column justify-content-end p-3 text-white"
                         style="background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%), url('@item.MediaUrl');
                        background-size: cover;
                        background-position: center;
                        border: 1px solid rgba(255,255,255,0.1);">

                        <h5 class="fw-bold mb-0">@item.Heading</h5>
                        <small class="opacity-75">@item.SubHeading</small>
                    </div>
                </BackgroundTemplate>

                <OverlayTemplate Context="item">
                    @* Context="item" ist hier wichtig, damit wir wissen, WELCHES Bild wir öffnen *@

                    <div class="position-absolute top-0 end-0 m-2" style="z-index: 20;">
                        <button class="btn btn-sm btn-light border-0 shadow-sm opacity-75-hover"
                                style="background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); color: white;"
                                @onclick:stopPropagation="true"
                                @onclick="() => OpenImage(item.MediaUrl)">
                            <i class="bi bi-arrows-angle-expand"></i>
                        </button>
                    </div>

                    @* Dein bisheriges Badge unten *@
                    <div class="position-absolute bottom-0 end-0 m-2" style="z-index: 10;">
                        <span class="badge bg-dark border border-light opacity-50 small">
                            <i class="bi bi-grid-3x3-gap"></i> Sync
                        </span>
                    </div>
                </OverlayTemplate>

            </P11Carousel>

        </div>
    </div>

    <hr />

    <P11Carousel TItem="GalleryItem"
                 Items="_visualShowcase"
                 Type="P11CarouselType.Gallery"
                 Interval="5000"
                 AriaLabel="Gallery"
                 VisibleSlotsSm="1"
                 VisibleSlotsMd="2"
                 VisibleSlotsLg="4"
                 Rows="3"
                 Gap="2"
                 Animation="P11AnimationType.BlurReveal"
                 IsFullScreen="true"
                 IsAsync="true"
                 AsyncRandom="6.2"
                 PauseOnHover="true"
                 OverlayColor="Black"
                 OverlayOpacity="0.4">

        <BackgroundTemplate Context="item">
            @* LAYER 1: Nur das Bild/Hintergrund. Keine Texte mehr hier! *@
            <div class="h-100 w-100"
                 style="background: url('@item.MediaUrl');
                background-size: cover;
                background-position: center;
                border: 1px solid rgba(255,255,255,0.1);">
            </div>
        </BackgroundTemplate>

        <OverlayTemplate Context="item">
            @* LAYER 3: Hier liegen nun ALLE Texte und Buttons. 
                Diese liegen ÜBER dem Color-Overlay und bleiben daher hell und kontrastreich. *@

            @* 1. Die Texte (nach unten ausgerichtet) *@
            <div class="h-100 w-100 d-flex flex-column justify-content-end p-3 text-white pointer-events-none">
                <h5 class="fw-bold mb-0">@item.Heading</h5>
                <small class="opacity-75">@item.SubHeading</small>
            </div>

            @* 2. Action Button oben rechts *@
            <div class="position-absolute top-0 end-0 m-2">
                <button class="btn btn-sm btn-light border-0 shadow-sm"
                        style="background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); color: white;"
                        @onclick:stopPropagation="true"
                        @onclick="() => OpenImage(item.MediaUrl)">
                    <i class="bi bi-arrows-angle-expand"></i>
                </button>
            </div>

            @* 3. Badge unten rechts *@
            <div class="position-absolute bottom-0 end-0 m-2">
                <span class="badge bg-dark border border-light opacity-50 small">
                    <i class="bi bi-grid-3x3-gap"></i> Sync
                </span>
            </div>
        </OverlayTemplate>

    </P11Carousel>

    <hr />

    <P11Carousel TItem="GalleryItem"
                 Items="_galleryItems"
                 AriaLabel="Test"
                 Type="P11CarouselType.Category"
                 Interval="4000"
                 VisibleSlotsSm="1"
                 VisibleSlotsMd="2"
                 VisibleSlotsLg="4"
                 Gap="3"
                 Animation="P11AnimationType.BlurReveal"
                 IsFullScreen="false"
                 Height="350px"
                 OverlayColor="Black"
                 OverlayOpacity="0.3">

        <BackgroundTemplate Context="item">
            <div class="h-100 w-100"
                 style="background: url('@item.MediaUrl');
                background-size: cover;
                background-position: center;">
            </div>
        </BackgroundTemplate>

        <OverlayTemplate Context="item">
            @* Layer 3: Fokus auf die produktspezifischen Informationen *@
            <div class="h-100 w-100 d-flex flex-column justify-content-end p-3 text-white">

                @* Container für die untere Zeile: Infos links, Button rechts *@
                <div class="d-flex justify-content-between align-items-end">

                    @* Linke Seite: Text-Informationen *@
                    <div class="p11-item-info">
                        <h6 class="fw-bold mb-0">@item.SubHeading</h6>

                        @if (item.PriceTag > 0)
                        {
                            <p class="small mb-0 opacity-75">Ab @item.PriceTag.ToString("N2") €</p>
                        }
                    </div>

                    @* Rechte Seite: More Info Button *@
                    <button class="btn btn-sm p11-btn-more-info"
                            @onclick:stopPropagation="true"
                            @onclick="() => OpenImage(item.MediaUrl)"
                            style="background: rgba(255, 255, 255, 0.2);
                       border: 1px solid rgba(255, 255, 255, 0.4);
                       color: white;
                       backdrop-filter: blur(4px);
                       font-size: 0.75rem;
                       padding: 0.4rem 0.8rem;
                       transition: all 0.2s ease;">
                        More Info
                    </button>
                </div>
            </div>
        </OverlayTemplate>

    </P11Carousel>

    <hr />

    <P11Carousel TItem="PartnerBrand"
                 Items="_partners"
                 Type="P11CarouselType.Carousel"
                 Interval="20000"
                 VisibleSlotsLg="5"
                 VisibleSlotsMd="3"
                 VisibleSlotsSm="2"
                 Height="120px"
                 Gap="2"
                 OverlayColor="Black"
                 OverlayOpacity="0.7">

        <BackgroundTemplate Context="partner">
            @* Layer 1: Das Logo, zentriert und skaliert *@
            <div class="h-100 w-100 d-flex align-items-center justify-content-center">
                <img src="@partner.LogoUrl"
                     alt="@partner.Name"
                     class="p11-logo-img" />
            </div>
        </BackgroundTemplate>

        <OverlayTemplate Context="partner">
            @* Layer 3: Der Container dient jetzt nur noch dem Layout (zentrieren).
               'cursor: default' sorgt dafür, dass man nicht denkt, das Bild sei klickbar.
            *@
            <div class="h-100 w-100 d-flex flex-column align-items-center justify-content-center text-center p11-hover-info"
                 style="cursor: default;">

                <small class="fw-bold text-primary mb-1">@partner.Name</small>

                @* Hier findet die Action statt! 
                   Nur der Button hat den Cursor und den Click-Handler.
                *@
                <button class="btn btn-sm btn-outline-primary"
                        style="font-size: 0.6rem; padding: 2px 5px; cursor: pointer;"
                        @onclick="() => OpenImage(partner.WebsiteUrl)"
                        @onclick:stopPropagation="true">
                    Besuchen
                </button>
            </div>
        </OverlayTemplate>

    </P11Carousel>

</div>

@* --- Beispiel 5: Selecting Focus Mode (Neu) --- *@
<div class="container-fluid py-5">
    <h4 class="mb-3">5. Selecting Focus Mode (Raw Implementation)</h4>
    <p class="text-muted">Testet das zirkuläre Fenster (Prev | Active | Next). Nur Layer 1 aktiv.</p>

    <div class="p11-demo-selection-wrapper bg-light p-4 rounded-4 shadow-sm">

        <P11Carousel TItem="GalleryItem"
                     Items="_visualShowcase"
                     Type="P11CarouselType.Selection"
                     ItemsBefore="2"
                     ItemsAfter="2"
                     Gap="1"
                     AriaLabel="Selection Demo">

            <BackgroundTemplate Context="item">
                @* Wir zeigen hier erst einmal nur das Bild mit dem Heading als Overlay im Layer 1 *@
                <div class="h-100 w-100 rounded-3 shadow"
                     style="background: linear-gradient(to top, rgba(0,0,0,0.7), transparent), url('@item.MediaUrl');
                        background-size: cover;
                        background-position: center;
                        min-height: 300px;
                        display: flex;
                        flex-direction: column;
                        justify-content: end;
                        padding: 1.5rem;
                        color: white;">
                    <h5 class="fw-bold mb-0">@item.Heading</h5>
                    <small>@item.Symbol @item.SubHeading</small>
                </div>
            </BackgroundTemplate>

        </P11Carousel>

    </div>
</div>

@code {
    public class SlideData
    {
        public string Title { get; set; } = "";
        public string Description { get; set; } = "";
        public string ImageUrl { get; set; } = "";
        public string HexColor { get; set; } = "";
        public string Icon { get; set; } = "";
        public double Price { get; set; }
    }

    private List<SlideData> _heroSlides = new()
    {
        new SlideData {
            Title = "Entdecke die Natur",
            Description = "Wunderschöne Landschaften direkt vor deiner Haustür.",
            ImageUrl = "https://picsum.photos/id/10/1200/600"
        },
        new SlideData {
            Title = "Moderne Architektur",
            Description = "Design, das Maßstäbe setzt und inspiriert.",
            ImageUrl = "https://picsum.photos/id/101/1200/600"
        },
        new SlideData {
            Title = "Kulinarische Highlights",
            Description = "Genuss pur in jedem Bissen.",
            ImageUrl = "https://picsum.photos/id/102/1200/600"
        }
    };

    private List<SlideData> _productSlides = new()
    {
        new SlideData { Title = "Produkt Blau", HexColor = "#007bff", Icon = "📱", Price = 599.99 },
        new SlideData { Title = "Produkt Grün", HexColor = "#28a745", Icon = "⌚", Price = 199.50 },
        new SlideData { Title = "Produkt Gelb", HexColor = "#ffc107", Icon = "🎧", Price = 89.00 }
    };


    public class GalleryItem : IP11CarouselEntity
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string Category { get; set; } = "";
        public string Heading { get; set; } = "";
        public string SubHeading { get; set; } = "";
        public string MediaUrl { get; set; } = "";
        public string ThemeColor { get; set; } = "#FFFFFF";
        public string Symbol { get; set; } = "";
        public double PriceTag { get; set; }
        public string AriaLabel { get; set; } = "";
    }

    private List<GalleryItem> _visualShowcase = new()
    {
        new GalleryItem { Heading = "Alpine Gipfel", SubHeading = "Grenzenlose Freiheit.", MediaUrl = "https://picsum.photos/id/10/1200/800", Symbol = "🏔️", AriaLabel = "Freiheit" },
        new GalleryItem { Heading = "Urbanes Leben", SubHeading = "Architektur von morgen.", MediaUrl = "https://picsum.photos/id/101/1200/800", Symbol = "🏙️", AriaLabel = "Architektur" },
        new GalleryItem { Heading = "Gourmet Welt", SubHeading = "Exquisite Aromen.", MediaUrl = "https://picsum.photos/id/102/1200/800", Symbol = "🍷", AriaLabel = "Aromen" },
        new GalleryItem { Heading = "Wüstenstille", SubHeading = "Perfekte Einfachheit.", MediaUrl = "https://picsum.photos/id/103/1200/800", Symbol = "🏜️", AriaLabel = "Einfachheit" },
        new GalleryItem { Heading = "Tiefblaues Meer", SubHeading = "Geheimnisse der Tiefe.", MediaUrl = "https://picsum.photos/id/104/1200/800", Symbol = "🌊", AriaLabel = "Tiefe" },
        new GalleryItem { Heading = "Waldgeflüster", SubHeading = "Die Seele des Grüns.", MediaUrl = "https://picsum.photos/id/106/1200/800", Symbol = "🌲", AriaLabel = "Grün" },
        new GalleryItem { Heading = "Goldener Herbst", SubHeading = "Farbenpracht der Natur.", MediaUrl = "https://picsum.photos/id/108/1200/800", Symbol = "🍂", AriaLabel = "Natur" },
        new GalleryItem { Heading = "Technik Fokus", SubHeading = "Präzision im Detail.", MediaUrl = "https://picsum.photos/id/119/1200/800", Symbol = "⚙️", AriaLabel = "Detail" },
        new GalleryItem { Heading = "Kaffeekultur", SubHeading = "Genuss am Morgen.", MediaUrl = "https://picsum.photos/id/133/1200/800", Symbol = "☕", AriaLabel = "Morgen" },
        new GalleryItem { Heading = "Inselparadies", SubHeading = "Traumstrände weltweit.", MediaUrl = "https://picsum.photos/id/146/1200/800", Symbol = "🏝️", AriaLabel = "Traumstrände" },
        new GalleryItem { Heading = "Arktis Abenteuer", SubHeading = "Eisige Welten.", MediaUrl = "https://picsum.photos/id/152/1200/800", Symbol = "❄️", AriaLabel = "Welten" },
        new GalleryItem { Heading = "Bibliothek", SubHeading = "Wissen vergangener Tage.", MediaUrl = "https://picsum.photos/id/158/1200/800", Symbol = "📚", AriaLabel = "Wissen" },
        new GalleryItem { Heading = "Sternennacht", SubHeading = "Blick in die Unendlichkeit.", MediaUrl = "https://picsum.photos/id/160/1200/800", Symbol = "✨", AriaLabel = "Unendlichkeit" },
        new GalleryItem { Heading = "Brückenbau", SubHeading = "Verbindungen schaffen.", MediaUrl = "https://picsum.photos/id/164/1200/800", Symbol = "🌉", AriaLabel = "Verbindungen" },
        new GalleryItem { Heading = "Frühlingserwachen", SubHeading = "Neues Leben blüht auf.", MediaUrl = "https://picsum.photos/id/175/1200/800", Symbol = "🌸", AriaLabel = "Leben" }
    };

    private List<GalleryItem> _galleryItems = new()
    {
        // 1. Kategorie: Hiking
        new GalleryItem { Category = "Hiking", Symbol = "🥾", SubHeading = "Pro Boot X1", MediaUrl = "https://picsum.photos/id/10/800/600", PriceTag = 129.00, AriaLabel = "Hiking category item" },
        new GalleryItem { Category = "Hiking", Symbol = "🥾", SubHeading = "Summit Pack", MediaUrl = "https://picsum.photos/id/11/800/600", PriceTag = 89.00, AriaLabel = "Hiking category item" },

        // 2. Kategorie: Camping
        new GalleryItem { Category = "Camping", Symbol = "⛺", SubHeading = "NightShelter 3", MediaUrl = "https://picsum.photos/id/103/800/600", PriceTag = 299.00, AriaLabel = "Camping category item" },
        new GalleryItem { Category = "Camping", Symbol = "⛺", SubHeading = "FireStar Stove", MediaUrl = "https://picsum.photos/id/104/800/600", PriceTag = 45.00, AriaLabel = "Camping category item" },

        // 3. Kategorie: Photo
        new GalleryItem { Category = "Photo", Symbol = "📷", SubHeading = "Vista Lens 35mm", MediaUrl = "https://picsum.photos/id/250/800/600", PriceTag = 599.00, AriaLabel = "Photography category item" },
        new GalleryItem { Category = "Photo", Symbol = "📷", SubHeading = "Pro Tripod Alpha", MediaUrl = "https://picsum.photos/id/251/800/600", PriceTag = 120.00, AriaLabel = "Photography category item" },

        // 4. Kategorie: Biking
        new GalleryItem { Category = "Biking", Symbol = "🚲", SubHeading = "Trail Runner V2", MediaUrl = "https://picsum.photos/id/146/800/600", PriceTag = 1450.00, AriaLabel = "Biking category item" },
        new GalleryItem { Category = "Biking", Symbol = "⛑️", SubHeading = "Aero Helmet", MediaUrl = "https://picsum.photos/id/147/800/600", PriceTag = 85.00, AriaLabel = "Biking category item" },

        // 5. Kategorie: Winter
        new GalleryItem { Category = "Winter", Symbol = "🎿", SubHeading = "Powder Carver", MediaUrl = "https://picsum.photos/id/152/800/600", PriceTag = 420.00, AriaLabel = "Winter sports category item" },
        new GalleryItem { Category = "Winter", Symbol = "🥽", SubHeading = "Thermal Goggles", MediaUrl = "https://picsum.photos/id/153/800/600", PriceTag = 65.00, AriaLabel = "Winter sports category item" },

        // 6. Kategorie: Urban
        new GalleryItem { Category = "Urban", Symbol = "🧥", SubHeading = "City Slicker Jacket", MediaUrl = "https://picsum.photos/id/158/800/600", PriceTag = 195.00, AriaLabel = "Urban lifestyle category item" },
        new GalleryItem { Category = "Urban", Symbol = "👟", SubHeading = "Metro Sneakers", MediaUrl = "https://picsum.photos/id/159/800/600", PriceTag = 110.00, AriaLabel = "Urban lifestyle category item" },

        // 7. Kategorie: Water
        new GalleryItem { Category = "Water", Symbol = "🏄", SubHeading = "BlueWave Board", MediaUrl = "https://picsum.photos/id/164/800/600", PriceTag = 850.00, AriaLabel = "Water sports category item" },
        new GalleryItem { Category = "Water", Symbol = "🧜", SubHeading = "Pro Wetsuit", MediaUrl = "https://picsum.photos/id/165/800/600", PriceTag = 230.00, AriaLabel = "Water sports category item" }
    };

    public class PartnerBrand : IP11CarouselEntity
    {
        public string Name { get; set; } = string.Empty;
        public string LogoUrl { get; set; } = string.Empty;
        public string Industry { get; set; } = string.Empty;
        public string WebsiteUrl { get; set; } = string.Empty;

        // Interface-Implementierung für P11 Standard
        public string AriaLabel => $"Partner Unternehmen: {Name}";
        public string Category => Industry;
    }
    private List<PartnerBrand> _partners = new()
    {
        new() { Name = "Google", LogoUrl = "https://picsum.photos/id/1/200/100", Industry = "Software", WebsiteUrl = "https://google.com" },
        new() { Name = "Microsoft", LogoUrl = "https://picsum.photos/id/2/200/100", Industry = "Software", WebsiteUrl = "https://microsoft.com" },
        new() { Name = "Apple", LogoUrl = "https://picsum.photos/id/3/200/100", Industry = "Hardware", WebsiteUrl = "https://apple.com" },
        new() { Name = "Meta", LogoUrl = "https://picsum.photos/id/4/200/100", Industry = "Social Media", WebsiteUrl = "https://meta.com" },
        new() { Name = "Amazon", LogoUrl = "https://picsum.photos/id/5/200/100", Industry = "E-Commerce", WebsiteUrl = "https://amazon.com" },
        new() { Name = "Tesla", LogoUrl = "https://picsum.photos/id/6/200/100", Industry = "Automotive", WebsiteUrl = "https://tesla.com" }
    };

    private async Task OpenImage(string url)
    {
        // Öffnet das Bild in einem neuen Tab (simples Resize/Zoom-Szenario)
        await JSRuntime.InvokeVoidAsync("open", url, "_blank");
    }
}

Component API

Parameter	Type	Default	Description
`Type`	`P11CarouselType`	`Slider`	Specifies the carousel mode: Slider, Gallery, Carousel, Category or Selection (peeking/focus mode).
`Items`	`IEnumerable<TItem>?`	`null`	The collection of items to display. Items should implement IP11CarouselEntity for best A11y & Category mode support.
`BackgroundTemplate`	`RenderFragment<TItem>?`	`null`	Template for Layer 1 – background/media content (images, videos, etc.).
`OverlayTemplate`	`RenderFragment<TItem>?`	`null`	Template for Layer 3 – static overlay content (titles, buttons, descriptions) that remains unaffected by animations.
`IsFullScreen`	`bool`	`false`	If true, uses 100dvh (dynamic viewport height) – ideal for hero sections.
`Height`	`string`	`"500px"`	Fixed height when IsFullScreen=false. Supports px, vh, rem, etc.
`Animation`	`P11AnimationType`	`Slide`	Visual transition effect between items.
`Interval`	`int`	`5000`	Time in ms between automatic transitions (when AutoCycle=true).
`AutoCycle`	`bool`	`true`	Enables automatic cycling through items.
`PauseOnHover`	`bool`	`true`	Pauses auto-cycle and animations on mouse hover / touch focus.
`ShowNavigationArrows`	`bool`	`true`	Shows previous/next arrow buttons.
`ShowNavigationIndicators`	`bool`	`true`	Shows dot indicators at the bottom (for Slider/Selection modes).
`IconClassPrevious`	`string`	`"bi bi-chevron-left fs-1"`	CSS classes for the previous arrow icon (Bootstrap Icons + utilities).
`IconClassNext`	`string`	`"bi bi-chevron-right fs-1"`	CSS classes for the next arrow icon.
`ShowProgressBar`	`bool?`	`null` (type-dependent)	Shows a progress bar for auto-cycle. Default: true for Slider, false for Gallery.
`OverlayColor`	`string`	`"black"`	Color of the semi-transparent overlay layer (Layer 2).
`OverlayOpacity`	`double`	`0.0`	Opacity of the overlay layer (0.0 = transparent, 1.0 = fully opaque).
`VisibleSlotsSm`	`int`	`1`	Visible items/columns on small screens (< 768px).
`VisibleSlotsMd`	`int`	`3`	Visible items/columns on medium screens (≥ 768px).
`VisibleSlotsLg`	`int`	`4`	Visible items/columns on large screens (≥ 1200px).
`Rows`	`int`	`1`	Number of rows in Gallery mode.
`Gap`	`int`	`0`	Gap between items using Bootstrap spacing scale (0–5).
`GalleryOrder`	`P11GalleryOrder`	`Asc`	Order logic for Gallery rotation: Ascending, Descending or Random.
`IsAsync`	`bool`	`false`	If true: each gallery slot uses its own timer (organic/wimmel effect).
`AsyncRandom`	`double`	`0.85`	Randomization factor for async mode (0.0 = none, 1.0 = maximum variation).
`ItemsBefore`	`int`	`1`	Number of peek items shown before the active/center item (Selection mode).
`ItemsAfter`	`int`	`1`	Number of peek items shown after the active/center item (Selection mode).
`CssClass`	`string?`	`null`	Additional CSS class(es) for the main carousel container.
`AriaLabel`	`string?`	`null`	Global accessible label for the entire carousel component.
`RightToLeft`	`bool`	`false`	Direction for Carousel/Ticker mode: true = right to left.
`SkipValidation`	`bool`	`false`	Suppresses runtime configuration warnings (e.g. missing Items.Count check).
`OnItemClick`	`EventCallback<TItem>`	—	Callback when an item or its overlay is clicked.
`BaseZIndex`	`int`	`1`	Base z-index value for layering inside the component.

Enums

P11CarouselType – Carousel Modes

Value	Description
Slider	Classic full-width hero slider (one item at a time)
Gallery	Grid-based multi-item exploration (rows + columns)
Carousel	Continuous seamless ticker / marquee (endless loop)
Category	Auto-grouped by Category property – each group is its own carousel
Selection	Focus / peeking mode with centered active item + visible before/after items

P11AnimationType – Transition Effects

Value	Description
Slide	Horizontal slide transition
Fade	Cross-fade
Zoom	Scale in/out effect
VerticalDown	Slide in from top to bottom
VerticalUp	Slide in from bottom to top
DiagonalUp	Diagonal slide from bottom-left
Flip	Card-flip like rotation
KenBurns	Continuous slow zoom + pan (20s cycle)
Parallax	Depth effect – background moves slower
BlurReveal	Progressive sharpen / focus reveal
None	Instant hard cut (0ms transition)

P11GalleryOrder – Gallery Rotation Logic

Value	Description
Asc	Sequential ascending order
Desc	Sequential descending order
Random	Random selection on each cycle