BlazorHorizontalScroller 1.0.8

📦 BlazorHorizontalScroller

A lightweight horizontal scroller component for Blazor WebAssembly and Blazor Server apps. Supports inertia-based dragging, snapping, item spacing, overflow control, and carousel mode — with smooth, touch-friendly interactions powered by JavaScript interop.

It is meant to be a super lightweight version of Slick Carousel, so I didn't include fancy stuff, but you can code some yourself using the callbacks.

This nuget is subject to big changes, use with precaution.

Big thanks to ChatGPT for assisting in creating this component!

✨ Features

• No external dependencies
• Carousel mode with responsive slides-per-view control
• Customizable overflow behavior
• Optional inertia and decay-based drag scrolling
• Snap-to-item enabled by default with configurable delay
• Supports mouse, touch, and programmatic scrolling

📦 Installation

Add the NuGet package to your project:

dotnet add package BlazorHorizontalScroller

Then, add this in the file you want to use

@using BlazorHorizontalScroller

🔧 Usage

Basic Example

<HorizontalScroller Items="myItems">
        <ItemTemplate>
            <div>
                @context
            </div>
        </ItemTemplate>
</HorizontalScroller>

Sliding cards overflowing example

When using AllowOverflow=true, you should style some ancestor with overflow-x: hidden; to delimit the overflow. It will avoid the overflow going out of the page. But don't set it on the body tag, as this will prevent your whole page from using position: sticky;.

<HorizontalScroller Items="myItems"
                    ItemTemplate="item => @<div class='card' style='width: 70vw;max-width: 70vw;'>@item</div>"
                    ItemSpacing="2rem"
                    AllowOverflow="true" />

Carousel example

@using BlazorHorizontalScroller
<HorizontalScroller Items="myItems"
                    ItemTemplate="item => @<div class='card'>@item</div>"
                    CarouselMode="true"
                    CarouselItemsPerSlideSelector="info => info!.ViewportWidth > 800 ? 3 : 1" />

📐 Parameters

📱 Methods

📊 WidthInfo Struct

public record WidthInfo(double ParentWidth, double ViewportWidth);

Useful for responsive calculations in your CarouselItemsPerSlideSelector delegate.

📜 Notes

• When AllowOverflow is true, you might need to apply overflow-x: hidden to a parent container to prevent unwanted page scrollbars.
• The component relies on a JS module (horizontalScroller.min.js) for drag, inertia, and snapping behavior. Make sure it’s properly published in your _content/BlazorHorizontalScroller/ directory.

📣 License

MIT License — free to use, modify, and distribute.