Novelty Plastic Moustache

    scrollsnap-controls
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.10 • Public • Published

    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

    Keywords

    none

    Install

    npm i scrollsnap-controls

    DownloadsWeekly Downloads

    9

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    388 kB

    Total Files

    25

    Last publish

    Collaborators

    • georgeadamson