TheBlazorCarousel 1.0.0

dotnet add package TheBlazorCarousel --version 1.0.0                
NuGet\Install-Package TheBlazorCarousel -Version 1.0.0                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="TheBlazorCarousel" Version="1.0.0" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add TheBlazorCarousel --version 1.0.0                
#r "nuget: TheBlazorCarousel, 1.0.0"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install TheBlazorCarousel as a Cake Addin
#addin nuget:?package=TheBlazorCarousel&version=1.0.0

// Install TheBlazorCarousel as a Cake Tool
#tool nuget:?package=TheBlazorCarousel&version=1.0.0                

BlazorCarousel

A templated Blazor Carousel (TemplatedCarousel) component and the original Image Carousel (Carousel) it started life from.

The project started life as a basic Image Carousel and was extended to add some 'useful' features and finally I took the plunge to make it support templating, meaning any content can be embedded into the Carousel.

The sample project contains some embedded images and renders the images into both components showing the various options.

Basic usage

Add a reference to your project, referencing the 'Components' project

In your _Host.cshtml file add the following line to use the default stylesheet:

<link href="_content/Components/blazorcarousel.css" rel="stylesheet" />

Add the component to your Razor page using the following lines:

    @using Components;

The Old Image Carousel

For the old carousel, add the following line to create an instance:

    <Carousel imageset="@AssetImages" CssClass="col-12" AutoScrollInterval="5"></Carousel>

... where @AssetImages is a reference to a List of ImageFile that you build up yourself.

The ImageFile can either have FileContent (the image bytes) or a Url specified. The sample project contains examples of both in the CarouselSample.razor page

imageset: a List<FileImage> for the carousel to render

CssClass: additional CSS classes that you want to apply to the carousel outer container

ImageClass: additional CSS classes that you want to apply to the indivudal IMAGE containers (Note: applied to all)

OnCarouselItemClicked: event handler for when an item is clicked (also changes the cursor to reflect an image can be clicked)

AutoScrollInterval: the number of seconds to elapse before the next image in the sequence is displayed automatically

ShowNavigation: (Defaulted to true) allows the bottom navigation panel to be displayed or hidden

The new Templated Carousel Component

For the templated carousel, add lines similar to the following:

<TemplatedCarousel Items="AssetImages" TItem="ImageFile">
    <ItemTemplate>
        <img class="center" src="@GetImageSource(@context)" alt="@context.FileName">
    </ItemTemplate>
</TemplatedCarousel>
Current TemplatedCarousel Parameters:

TItem: The type of item being rendered

Items: The List of items to be rendered

ItemTemplate: The HTML templated being used to render the items

CssClass: additional CSS classes that you want to apply to the carousel outer container

OnCarouselItemClicked: event handler for when an item is clicked (also changes the cursor to reflect an image can be clicked)

AutoScrollInterval: the number of seconds to elapse before the next image in the sequence is displayed automatically

ShowNavigation: (Defaulted to true) allows the bottom navigation panel to be displayed or hidden

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0 440 11/30/2022