<scrollsnap-controls>

Helper 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

Using this component

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...!

• Only tested with horizontal scrollsnap.
• Assumes all scroll items are the same width.

Props/Attributes for using <scrollsnap-controls>

For latest see the component readme.

Properties

| 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 |