An implementation of a content scroller as a web-component.
<FluentHorizontalScroll> wraps the <fluent-horizontal-scroll> element, a web component implementation of a horizontal scroller leveraging the Fluent UI design system.
Examples
Default
Example
Card number 1
A buttonCard number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Download:
Full width cards
Example
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6
Download:
Slow scroll
Example
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Download:
Gradients
Example
Right gradient
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Gradient both sides
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Download:
Sizing
Example
Varying heights and widths (default middle aligned)
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Top aligned
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Bottom aligned
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Mobile
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16
Download:
External Navigation
Example
Card number 1Card number 2Card number 3Card number 4Card number 5Card number 6Card number 7Card number 8Card number 9Card number 10Card number 11Card number 12Card number 13Card number 14Card number 15Card number 16Scroll to PreviousScroll to NextScroll to 10
Download:
Documentation
FluentHorizontalScroll Class
Parameters
Name
Type
Default
Description
ChildContent
RenderFragment?
Gets or sets the content to be rendered inside the component.
Duration
string?
Gets or sets the CSS time value for the scroll transition duration. Overrides the `speed` attribute.
Easing
ScrollEasing?
EaseInOut
Gets or sets the attribute used for easing, defaults to ease-in-out.
FlippersHiddenFromAt
bool?
Gets or sets the attribute to hide flippers from assistive technology.
Speed
int
600
Gets or sets the scroll speed in pixels per second.
View
HorizontalScrollView?
Default
Gets or sets the view: default | mobile.
Methods
Name
Parameters
Type
Description
DisposeAsync
ValueTask
ScrollInView
int viewIndex
void
ScrollToNext
void
ScrollToPrevious
void
Linear EaseIn EaseOut EaseInOut
Default Mobile
An error has occurred. This application may no longer respond until reloaded.
Reload🗙