previously Vue Storefront Build Better Storefronts


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 hook in the Hooks > useScrollable docs.


Hide Scrollbar

Can be setup that will be without scrollbar


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.