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.

Carousel Showcase

1. Hero Slider (Auto-Cycle & Fullscreen)

Dieses Beispiel wechselt alle 5 Sekunden automatisch und nutzt das Overlay für Text.

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.

2. Produkt-Gallery (Manuell)

Kein automatischer Wechsel. Der User muss klicken oder wischen.

📱

Produkt Blau

Price: 599.99 €

⌚

Produkt Grün

Price: 199.5 €

🎧

Produkt Gelb

Price: 89 €

Implementation

<h1 class="p11-mb-4">Carousel Showcase</h1>

@* --- Full-Screen Hero Slider (Auto-Cycle) --- *@
<section class="p11-mb-5">
    <h3>1. Hero Slider (Auto-Cycle & Fullscreen)</h3>
    <p>Dieses Beispiel wechselt alle 5 Sekunden automatisch und nutzt das Overlay für Text.</p>

    <P11Carousel TItem="SlideData"
                 Items="@_heroSlides"
                 Type="P11CarouselType.Slider"
                 IsFullScreen="false"
                 Animation="P11AnimationType.BlurReveal"
                 Height="60vh"
                 ShowProgressBar="true"
                 AutoCycle="true"
                 Interval="6000">

        <BackgroundTemplate Context="slide">
            <img src="@slide.ImageUrl" alt="@slide.Title" />
        </BackgroundTemplate>

        <OverlayTemplate Context="slide">
            <div class="p11-d-flex p11-flex-column p11-justify-content-center p11-align-items-start p11-h-100 p11-p-5"
                 style="background: rgba(0,0,0,0.3); color: white;">
                <h2 class="p11-display-4">@slide.Title</h2>
                <p class="p11-lead">@slide.Description</p>
                <button class="p11-btn p11-btn-primary">Mehr erfahren</button>
            </div>
        </OverlayTemplate>

    </P11Carousel>
</section>

<hr />

@* --- Manual Product-Picker --- *@
<section class="p11-mb-5">
    <h3>2. Produkt-Gallery (Manuell)</h3>
    <p>Kein automatischer Wechsel. Der User muss klicken oder wischen.</p>

    <div style="max-width: 800px; margin: 0 auto; border: 1px solid #ddd;">
        <P11Carousel TItem="SlideData"
                     Items="@_productSlides"
                     Type="P11CarouselType.Slider"
                     Height="400px"
                     AutoCycle="false">

            <BackgroundTemplate Context="item">
                <div style="background-color: @item.HexColor; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 5rem;">@item.Icon</span>
                </div>
            </BackgroundTemplate>

            <OverlayTemplate Context="item">
                <div class="p11-mt-auto p11-p-3 p11-bg-white p11-text-dark" style="opacity: 0.9;">
                    <h4>@item.Title</h4>
                    <p>Price: @item.Price €</p>
                </div>
            </OverlayTemplate>

        </P11Carousel>
    </div>
</section>

@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 }
    };
}

Component API

Parameter	Type	Default	Description
`Items`	`IEnumerable<P11CarouselItem>`	`null`	The collection of items to display in the carousel.
`Animation`	`P11AnimationType`	`Slide`	Sets the visual transition effect (Slide, Fade, KenBurns, Parallax, BlurReveal).
`Interval`	`int`	`5000`	Time in milliseconds before transitioning to the next slide.
`AutoCycle`	`bool`	`true`	Determines if the carousel should automatically switch slides.
`ShowProgressBar`	`bool`	`false`	If true, shows a glassmorphism progress bar indicating the time until the next slide.
`PauseOnHover`	`bool`	`true`	Pauses the auto-cycle and progress bar when the mouse enters the carousel area.