previously Vue Storefront Build Better Storefronts

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 the useScrollable utility under the hood.

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

Examples

Hide Scrollbar

Can be setup that will be without scrollbar

Snap

SfScrollable can be configured with center snap while dragging.

Scroll by one item

Normally, the SfScrollable scrolls one page of items at a time, but you can change it so each time you press the next or previous button, it will switch an active item accordingly.

Accessibility notes

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

Playground