Scrollsnap-controls NPM

\<scrollsnap-controls>

Helper for use with a CSS Scrollsnap element. Adds indicator buttons and handlers for Prev/Next buttons.

After adding a script you can use this compoennt just like any other html element.

Add a script tag similar to this:

<script type="module" src="https://cdn.jsdelivr.net/npm/scrollsnap-controls/dist/esm/scrollsnap-controls.min.js"></script>

...then you can use the element like this:

<scrollsnap-controls for="my-slider" prev="my-slider-prev" next="my-slider-next" polyfill aria></scrollsnap-controls>

| This component is an experimental POC with caveats...!

For latest see the component readme.

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`