TheBlazorCarousel 1.0.0
dotnet add package TheBlazorCarousel --version 1.0.0
NuGet\Install-Package TheBlazorCarousel -Version 1.0.0
<PackageReference Include="TheBlazorCarousel" Version="1.0.0" />
paket add TheBlazorCarousel --version 1.0.0
#r "nuget: TheBlazorCarousel, 1.0.0"
// 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
Current Carousel Parameters:
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 | Versions 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. |
-
net6.0
- Microsoft.AspNetCore.Components (>= 3.1.1)
- Microsoft.AspNetCore.Components.Web (>= 3.1.1)
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 |