_settings.LogoTextبلـیزی فـای
حمایت
فارسی English
BzCarousel

اسلایدر

دکمهفرم و اینپوتگروه اینپوتگروه دکمهانتخاب تاریختکمیل خودکارکارتنمایشلودینگدیالوگاعلانپیام عملیاتمنو کشوییکانتکس منوصفحه بندیلایت باکسدرختدیتاگریدنمودارتب و آکاردیوننویگیشن بارسایدبارتایم لاینویزارداسلایدرآپلودرادیتور متنتقویمابزار ایرانی
اسلاید ساده + Pagination کسری

اسلایدها رو به صورت RenderFragment بدهید. PaginationType شکل نشانگر صفحه رو عوض میکنه.

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) + اتوپلی

Effect نوع انیمیشن جابه جایی رو تعیین میکنه و Autoplay فاصله ی زمانی به میلی ثانیه است.

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 چند اسلاید هم زمان دیده می شود و Loop چرخه رو بی انتها میکنه.

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)

مناسب فضای باریک؛ اینجا عرض والد رو محدود کرده ایم.

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>"),
    };
}
چندتایی + فاصله

Gap فاصله ی بین اسلایدها به پیکسل است.

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>"),
    };
}
با بندانگشتی (Thumbnails)

Thumbnails یک نوار پیش نمایش زیر اسلایدر اضافه میکنه.

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>"),
    };
}