BlazorCarousel

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 19 Open GitHub ↗

A simple Blazor Carousel component.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:

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:

... 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:

###### 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

This project is tested with BrowserStack

BlazorCarousel

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

BlazorCarousel

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README