Vue

Scrollable

This is an experimental component

This component is shipped in our NPM package, but its API might change based on user feedback.

SfScrollable is a component that allows to build interactive slider. It uses useScrollable composable.

Learn more about useScrollable composable in the Composables > useScrollable docs.

Examples

Hide Scrollbar

Can be setup that will be without scrollbar

Snap

SfScrollbale can be configured with center snap while dragging.

Scroll by one item

By default SfScrollable scroll by one page of items, but can be modified that every next and previous button will change active item directly.

Accessibility notes

The previous and next buttons have aria-label attributes (buttonPrevAriaLabel and buttonNextAriaLabel props) that provide accessible labels for screen readers.

Playground