Add arrows to CSS scroll-snap containers
npm install scroll-snap-arrowsAdd arrows to your scrollable elements that scroll to the next available snap position.
The arrow elements will automatically hide if there are no more snap positions available in its direction.
Uses scroll-snap-api.
``shell
yarn add scroll-snap-arrows
npm install --save scroll-snap-arrows
`
Or use directly:
`js`
import { ScrollSnapArrows } from 'https://cdn.pika.dev/scroll-snap-arrows';
Add whichever directions you want. Pass a CSS selector as the attribute value.
Here's an example with all four directions:
`html
data-scroll-snap-arrow-left=".left-button"
data-scroll-snap-arrow-right=".right-button"
data-scroll-snap-arrow-up=".up-button"
data-scroll-snap-arrow-down=".down-button"
>
...
`
`html
...
``