包详细信息

scrollsnap-controls

georgeadamson53MIT1.0.7

Use with a CSS Scrollsnap element to add indicator dots & handlers for your Prev/Next buttons

自述文件

Built With Stencil

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