Bootstrap Blazor enterprise-level UI component library

Basic usage

A wide range of basic usages are used to bind components to an array of picture paths by setting the Items property values

Demo

<Carousel Images="@Images" Width="280" ShowControls="false" ShowIndicators="false" />

@code {
    /// <summary>
    /// Images
    /// </summary>
    private static List<string> Images => new()
    {
        "_content/BootstrapBlazor.Shared/images/Pic0.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic1.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic2.jpg"
    };
}

Show Controls

Set ShowControls to true for show/hide the controls of Carousel

Demo

<Carousel Images="@Images" Width="280" ShowControls="true" ShowIndicators="false" />

@code {
    /// <summary>
    /// Images
    /// </summary>
    private static List<string> Images => new()
    {
        "_content/BootstrapBlazor.Shared/images/Pic0.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic1.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic2.jpg"
    };
}

Indicator

Set ShowIndicators to true for show/hide the indicator of Carousel

Demo

<Carousel Images="@Images" Width="280" ShowControls="true" ShowIndicators="true" />

@code {
    /// <summary>
    /// Images
    /// </summary>
    private static List<string> Images => new()
    {
        "_content/BootstrapBlazor.Shared/images/Pic0.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic1.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic2.jpg"
    };
}

Fade in and out

By setting the IsFade property, the picture switches with a fade-in and fade-out effect

Demo

<Carousel Images="@Images" Width="280" IsFade="true" />

@code {
    /// <summary>
    /// Images
    /// </summary>
    private static List<string> Images => new()
    {
        "_content/BootstrapBlazor.Shared/images/Pic0.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic1.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic2.jpg"
    };
}

Caption

Set CarouselItem parameter Caption for the content of caption

Demo

First slide label

Second slide label

Thrid slide label

<Carousel Width="280" IsFade="true">
    <CarouselItem Caption="First slide label">
        <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
    </CarouselItem>
    <CarouselItem Caption="Second slide label">
        <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
    </CarouselItem>
    <CarouselItem Caption="Thrid slide label">
        <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
    </CarouselItem>
</Carousel>

Individual interval

Set Interval to a CarouselItem to change the amount of time to delay between automatically cycling to the next item. the default value is 5000 ms

Demo

First slide label

Second slide label

Thrid slide label

<Carousel Width="280" IsFade="true">
    <CarouselItem Caption="First slide label" Interval="5000">
        <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
    </CarouselItem>
    <CarouselItem Caption="Second slide label" Interval="2000">
        <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
    </CarouselItem>
    <CarouselItem Caption="Thrid slide label">
        <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
    </CarouselItem>
</Carousel>

Caption Template

Set CarouselItem 的 CaptionTemplate custom the caption of item

Demo

First slide label

Pic0.jpg

Second slide label

Pic1.jpg

Third slide label

Pic2.jpg

<Carousel Width="280" IsFade="true">
    <CarouselItem>
        <CaptionTemplate>
            <h5>First slide label</h5>
            <p>Pic0.jpg</p>
        </CaptionTemplate>
        <ChildContent>
            <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
        </ChildContent>
    </CarouselItem>
    <CarouselItem>
        <CaptionTemplate>
            <h5>Second slide label</h5>
            <p>Pic1.jpg</p>
        </CaptionTemplate>
        <ChildContent>
            <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
        </ChildContent>
    </CarouselItem>
    <CarouselItem>
        <CaptionTemplate>
            <h5>Third slide label</h5>
            <p>Pic2.jpg</p>
        </CaptionTemplate>
        <ChildContent>
            <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
        </ChildContent>
    </CarouselItem>
</Carousel>

Caption Class

Set CarouselItem 的 CaptionClass custome the class of caption

Demo

Set the CaptionClass to d-none d-md-block do not show the Caption in the small screen

First slide label

Pic0.jpg

Second slide label

Pic1.jpg

Third slide label

Pic2.jpg

<Carousel Width="280" IsFade="true">
    <CarouselItem CaptionClass="d-none d-md-block">
        <CaptionTemplate>
            <h5>First slide label</h5>
            <p>Pic0.jpg</p>
        </CaptionTemplate>
        <ChildContent>
            <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
        </ChildContent>
    </CarouselItem>
    <CarouselItem CaptionClass="d-none d-md-block">
        <CaptionTemplate>
            <h5>Second slide label</h5>
            <p>Pic1.jpg</p>
        </CaptionTemplate>
        <ChildContent>
            <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
        </ChildContent>
    </CarouselItem>
    <CarouselItem CaptionClass="d-none d-md-block">
        <CaptionTemplate>
            <h5>Third slide label</h5>
            <p>Pic2.jpg</p>
        </CaptionTemplate>
        <ChildContent>
            <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
        </ChildContent>
    </CarouselItem>
</Carousel>

Click on the image to call back the event

After you set the OnClick property by setting, click Image to trigger the OnClick callback delegate

Demo

CarouselOnClick

<h3>CarouselOnClick</h3>
<Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    /// <summary>
    /// Trace
    /// </summary>
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// Images
    /// </summary>
    private static List<string> Images => new()
    {
        "_content/BootstrapBlazor.Shared/images/Pic0.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic1.jpg",
        "_content/BootstrapBlazor.Shared/images/Pic2.jpg"
    };

    /// <summary>
    /// OnClick
    /// </summary>
    /// <param name="imageUrl"></param>
    /// <returns></returns>
    private Task OnClick(string imageUrl)
    {
        Trace?.Log($"Image Clicked: {imageUrl}");
        return Task.CompletedTask;
    }
}

Disable touch swiping

Set DisableTouchSwiping disable the swiping function on mobile

Demo

First slide label

Second slide label

Thrid slide label

<Carousel Width="280" IsFade="true" DisableTouchSwiping="true">
    <CarouselItem Caption="First slide label" Interval="5000">
        <img src="_content/BootstrapBlazor.Shared/images/Pic0.jpg" alt="demo-image" />
    </CarouselItem>
    <CarouselItem Caption="Second slide label" Interval="2000">
        <img src="_content/BootstrapBlazor.Shared/images/Pic1.jpg" alt="demo-image" />
    </CarouselItem>
    <CarouselItem Caption="Thrid slide label">
        <img src="_content/BootstrapBlazor.Shared/images/Pic2.jpg" alt="demo-image" />
    </CarouselItem>
</Carousel>

ChildContent

Use ChildContent render the customer content

Demo

Sales champion

www.blazor.zone

Carousel Item

Sales champion

www.blazor.zone

Carousel Item

Sales champion

www.blazor.zone

Carousel Item

Sales champion

www.blazor.zone

Carousel Item

Sales champion

www.blazor.zone

Carousel Item

Sales champion

www.blazor.zone

Carousel Item

<Carousel Width="720" ShowIndicators="false">
    <CarouselItem>
        <div class="carousel-item-demo2">
            <div class="demo-item">
                <div class="top">
                    <div>Sales champion</div>
                    <div>www.blazor.zone</div>
                </div>
                <img src="_content/BootstrapBlazor.Shared/images/avatars/150-5.jpg" alt="demo-image" />
                <div class="bottom">
                    Carousel Item
                </div>
            </div>
            <div class="demo-item">
                <div class="top">
                    <div>Sales champion</div>
                    <div>www.blazor.zone</div>
                </div>
                <img src="_content/BootstrapBlazor.Shared/images/avatars/150-7.jpg" alt="demo-image" />
                <div class="bottom">
                    Carousel Item
                </div>
            </div>
            <div class="demo-item">
                <div class="top">
                    <div>Sales champion</div>
                    <div>www.blazor.zone</div>
                </div>
                <img src="_content/BootstrapBlazor.Shared/images/avatars/150-11.jpg" alt="demo-image" />
                <div class="bottom">
                    Carousel Item
                </div>
            </div>
        </div>
    </CarouselItem>
    <CarouselItem>
        <div class="carousel-item-demo2">
            <div class="demo-item">
                <div class="top">
                    <div>Sales champion</div>
                    <div>www.blazor.zone</div>
                </div>
                <img src="_content/BootstrapBlazor.Shared/images/avatars/150-6.jpg" alt="demo-image" />
                <div class="bottom">
                    Carousel Item
                </div>
            </div>
            <div class="demo-item">
                <div class="top">
                    <div>Sales champion</div>
                    <div>www.blazor.zone</div>
                </div>
                <img src="_content/BootstrapBlazor.Shared/images/avatars/150-12.jpg" alt="demo-image" />
                <div class="bottom">
                    Carousel Item
                </div>
            </div>
            <div class="demo-item">
                <div class="top">
                    <div>Sales champion</div>
                    <div>www.blazor.zone</div>
                </div>
                <img src="_content/BootstrapBlazor.Shared/images/avatars/150-15.jpg" alt="demo-image" />
                <div class="bottom">
                    Carousel Item
                </div>
            </div>
        </div>
    </CarouselItem>
</Carousel>

Carousel

In limited space, loop through the same type of pictures, text, and more

Demo

Demo

Demo

Demo

Demo

Demo

Demo

First slide label

Second slide label

Third slide label

Demo

First slide label

Second slide label

Third slide label

Demo

CarouselOnClick

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01