Membership
Sprache de

Scroller Component Showcase

This page demonstrates all the available options for the Scroller component.

Default Configuration

Basic scroller with default settings

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

itemWidth Option

itemWidth="40rem" - Sets fixed width for each scroll item

  • Fixed Item 1
  • Fixed Item 2
  • Fixed Item 3
  • Fixed Item 4
  • Fixed Item 5
  • Fixed Item 6

itemMinWidth Option

itemMinWidth="50cqi" - Sets minimum width for each scroll item. Default is 80cqi.

  • Wide Item 1
  • Wide Item 2
  • Wide Item 3
  • Wide Item 4
  • Wide Item 5
  • Wide Item 6

gap

gap="5px" - defines the gap, defaults to 2rem;

  • Fixed Item 1
  • Fixed Item 2
  • Fixed Item 3
  • Fixed Item 4
  • Fixed Item 5
  • Fixed Item 6

marker Option

marker - Adds markers as scroll indicators instead of scrollbar.

  • Featured Item 1
  • Featured Item 2
  • Featured Item 3
  • Featured Item 4
  • Featured Item 5

accentColor Option

accentColor="#ff6b6b" - Sets custom accent color for the scroller

  • Accent Item 1
  • Accent Item 2
  • Accent Item 3
  • Accent Item 4
  • Accent Item 5
  • Accent Item 6
  • Accent Item 1
  • Accent Item 2
  • Accent Item 3
  • Accent Item 4
  • Accent Item 5
  • Accent Item 6

forcedScrolling Option

forcedScrolling - Forces scrolling behavior even on larger screens

  • Forced Scroll 1
  • Forced Scroll 2
  • Forced Scroll 3
  • Forced Scroll 4
  • Forced Scroll 5
  • Forced Scroll 1
  • Forced Scroll 2
  • Forced Scroll 3
  • Forced Scroll 4
  • Forced Scroll 5

scrollAlign Options

scrollAlign="start" (default)

Items align to the start of the scroll container

  • Start Align 1
  • Start Align 2
  • Start Align 3
  • Start Align 4
  • Start Align 5

scrollAlign="center"

Items align to the center of the scroll container

  • Center Align 1
  • Center Align 2
  • Center Align 3
  • Center Align 4
  • Center Align 5

scrollAlign="end"

Items align to the end of the scroll container

  • End Align 1
  • End Align 2
  • End Align 3
  • End Align 4
  • End Align 5

inlineScrollPadding Option

inlineScrollPadding="25cqi" - Sets padding around the scroll area. Mostly useful in combination with forcedScrolling.

  • Padded Item 1
  • Padded Item 2
  • Padded Item 3
  • Padded Item 4
  • Padded Item 5

Combined Options

Multiple options working together

  • Premium Item 1
  • Premium Item 2
  • Premium Item 3
  • Premium Item 4
  • Premium Item 5
  • Premium Item 6

Custom Classes

class="custom-scroller" - Apply custom CSS classes

  • Custom Styled 1
  • Custom Styled 2
  • Custom Styled 3
  • Custom Styled 4
  • Custom Styled 5