Use with a CSS Scrollsnap element to add indicator dots & handlers for your Prev/Next buttons
npm install scrollsnap-controlsHelper for use with a CSS Scrollsnap element.
Adds indicator buttons and handlers for Prev/Next buttons.
POC: Really rushed and unloved demo: https://codepen.io/georgeadamson/pen/VwPrwyY?editors=1100
After adding a script you can use this compoennt just like any other html element.
Add a script tag similar to this:
...then you can use the element like this:
| This component is an experimental POC with caveats...!
- Only tested with _horizontal_ scrollsnap.
- Assumes all scroll items are the same width.
---
| Property | Attribute | Description | Type | Default |
| ---------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------- |
| aria | aria | Optional: When set, the component will toggle aria attributes on the scrollsnap elements. This can be helpful to screenreaders but scenarios vary. | boolean | undefined |
| currentDot | current-dot | Optional: Specify a character or markup for the "current" page indicator dot. | (() => void) \| string | '🔘' |
| currentIndex | current-index | Readonly: Attribite to surface the index of the current page. | number | 0 |
| dot | dot | Optional: Specify a character or markup for an indicator dot. | (() => void) \| string | '⚪️' |
| htmlFor _(required)_ | for | Required: id or CSS selector for your scrollsnap element. | string | undefined |
| keys | keys | Experimental: When set, the component will attempt better paging of the scrollsnap using the ← → arrow keys. | boolean | undefined |
| next | next | Optional: id or CSS selector for your "Next" button. | string | undefined |
| polyfill | polyfill | Optional: When set, the component will fetch polyfills for browsers that do not support smoothscroll natively. (Eg Safari, Edge, IE11) | boolean | undefined |
| prev | prev | Optional: id or CSS selector for your "Previous" button. | string | undefined |
----------------------------------------------