Tesserae - Carousel

Carousel

Description

A slideshow component for cycling through elements

Carousels allow users to cycle through a set of related content, such as images, features, or messages. They are effective for showcasing highlights in a limited space.

The component supports any Tesserae component as a slide and provides automatic or manual navigation.

API reference

class

Carousel

public sealed class Carousel : ComponentBase<Carousel, HTMLElement>

A horizontal carousel that cycles through a sequence of items (slides) one at a time, with arrows and pagination.

Constructors

Constructor

Carousel

public Carousel(params IComponent[] slides)

Initializes a new instance of this class.

Properties

Property

Carousel.CurrentIndex

public int CurrentIndex { get ; set ; }

Gets or sets the current index.

Property

Carousel.SlideCount

public int SlideCount

Gets or sets the slide count.

Methods

Method

Carousel.AddSlide

public Carousel AddSlide(IComponent content)

Adds the given slide to the component.

Method

Carousel.AddSlides

public Carousel AddSlides(params IComponent[] slides)

Adds the given slides to the component.

Method

Carousel.OnSlideChange

public Carousel OnSlideChange(Action<Carousel> onSlideChanged)

Registers a callback invoked when the slide change event fires.

Method

Carousel.PadSlides

public Carousel PadSlides()

Configures the pad slides on the component.

Method

Carousel.SetIndex

public Carousel SetIndex(int index, bool raiseEvent = true)

Sets the index of the component.

Method

Carousel.Next

public Carousel Next()

Configures the component to next.

Method

Carousel.Previous

public Carousel Previous()

Configures the component to previous.

Method

Carousel.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Text Carousel

carousel-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var carousel = Carousel(
                VStack().P(32).Children(TextBlock("Discover Tesserae").Large().Bold(), TextBlock("Build stunning user interfaces in C# that compile to high-performance JavaScript.")).WS(),
                VStack().P(32).Children(TextBlock("Fluent API").Large().Bold(), TextBlock("Leverage a powerful, typed, and fluent API to define your layout and logic efficiently.")).WS(),
                VStack().P(32).Children(TextBlock("Native Performance").Large().Bold(), TextBlock("Zero-overhead abstractions mean your application runs fast on any modern browser.")).WS()
            ).PadSlides().H(150);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(carousel);
        }
    }
}

Image Gallery Carousel

carousel-image-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var carousel = Carousel(
                Image("https://cataas.com/cat").WS().H(300).Contain(),
                Image("https://cataas.com/cat").WS().H(300).Contain(),
                Image("https://cataas.com/cat").WS().H(300).Contain()
            ).H(300);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(carousel);
        }
    }
}

Interactive Carousel

carousel-interactive-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var carousel = Carousel(
                VStack().Children(TextBlock("Interactive Slide").Medium(), Button("Click me").OnClick(() => Toast().Success("Clicked!"))).P(32),
                VStack().Children(TextBlock("Configuration Slide").Medium(), CheckBox("Enable feature")).P(32)
            ).PadSlides().H(150);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(carousel);
        }
    }
}

Carousel

Description

API reference

Constructors

Carousel

Properties

Carousel.CurrentIndex

Carousel.SlideCount

Methods

Carousel.AddSlide

Carousel.AddSlides

Carousel.OnSlideChange

Carousel.PadSlides

Carousel.SetIndex

Carousel.Next

Carousel.Previous

Carousel.Render

Samples

Text Carousel

Image Gallery Carousel

Interactive Carousel

See also