_settings.LogoTextBlazify
Donate
فارسی English
BzCarousel

Carousel

ButtonsFormsInput groupButton groupsDatePickerAutoCompleteCardsDisplayLoadingDialogsNotificationsOperation messageDrawerContext menuPaginationLightboxTreeDataGridChartsTabs & AccordionNavigationSidebarTimelineWizardCarouselUploaderEditorCalendarIranian tools
Basic slide + fraction pagination

Pass slides as RenderFragments. PaginationType changes the page indicator.

1
2
3
4
5
razor 
@using BzCore.Components.Overlay
@using BzCore.Enums

<BzCarousel Slides="@slides"
            PaginationType="BzPaginationType.Fraction"
            Autoplay="2500" />

@code {
    // Any RenderFragment works as a slide — text, images, cards...
    private List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div class='slide'>1</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>2</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>3</div>"),
    };
}
Fade + autoplay

Effect picks the transition animation; Autoplay is the interval in milliseconds.

1
2
3
4
razor 
@using BzCore.Components.Overlay
@using BzCore.Enums

<BzCarousel Slides="@slides"
            Effect="BzCarouselEffect.Fade"
            Autoplay="2500" />

@* Effect: Slide | Fade | Coverflow | Cube | Flip | Cards *@

@code {
    // Any RenderFragment works as a slide — text, images, cards...
    private List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div class='slide'>1</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>2</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>3</div>"),
    };
}
Coverflow

PerView shows several slides at once, and Loop makes the cycle endless.

1
2
3
4
5
6
razor 
@using BzCore.Components.Overlay
@using BzCore.Enums

<BzCarousel Slides="@slides"
            Effect="BzCarouselEffect.Coverflow"
            PerView="3"
            Autoplay="2500"
            Loop />

@code {
    // Any RenderFragment works as a slide — text, images, cards...
    private List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div class='slide'>1</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>2</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>3</div>"),
    };
}
Cards

Good for tight spaces; here we capped the parent width.

1
2
3
4
5
razor 
@using BzCore.Components.Overlay
@using BzCore.Enums

<div style="max-width:320px;margin-inline:auto">
    <BzCarousel Slides="@slides"
                Effect="BzCarouselEffect.Cards"
                Navigation="false"
                Autoplay="2500" />
</div>

@code {
    // Any RenderFragment works as a slide — text, images, cards...
    private List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div class='slide'>1</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>2</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>3</div>"),
    };
}
Multiple per view + gap

Gap is the space between slides, in pixels.

1
2
3
4
5
6
7
8
razor 
@using BzCore.Components.Overlay
@using BzCore.Enums

<BzCarousel Slides="@slides"
            PerView="3"
            Gap="20"
            PaginationType="BzPaginationType.Progressbar"
            Autoplay="2500" />

@* PaginationType: Bullets | Dynamic | Progressbar | Fraction *@

@code {
    // Any RenderFragment works as a slide — text, images, cards...
    private List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div class='slide'>1</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>2</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>3</div>"),
    };
}
With thumbnails

Thumbnails adds a preview strip under the carousel.

1
2
3
4
5
6
1
2
3
4
5
6
razor 
@using BzCore.Components.Overlay
@using BzCore.Enums

<BzCarousel Slides="@slides" Thumbnails Loop="false" />

@code {
    // Any RenderFragment works as a slide — text, images, cards...
    private List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div class='slide'>1</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>2</div>"),
        b => b.AddMarkupContent(0, "<div class='slide'>3</div>"),
    };
}