Natively Pronounced Mandarin

    @fylgja/scroll-slider

    1.0.2 • Public • Published

    Fylgja - Scroll-slider

    NPM version license

    This CSS slider component allows you to make sliders with ease, and has no requirements to any Javascript.

    The only reason to add some additional Javascript, would be to add extra supporting functions.

    Like a navigation and a active state.

    Installation

    npm install @fylgja/scroll-slider

    Then include the component in to your code via;

    @use "@fylgja/scroll-slider";
    // Or via PostCSS import
    @import "@fylgja/scroll-slider";

    How to use

    To create a slider, you will need a wrapper element with the class .scroll-slider.

    Any direct children of the slider will become scroll items.

    <div class="scroll-slider">
        <div>..</div>
        <img src="">
    </div>

    The scroll items will by default have the size from the content.

    If you want your slides to have a specific size, you can use the CSS variables provided by this CSS component.

    A full width slider can be made by setting the scroll-size to 100% and setting the inline gap to 0.

    If you also want to reserve the scroll gap, set the block gap to whatever your want.

    <style>
        .scroll-slider.-full-slide {
            --scroll-size: 100%;
            --gap-inline: 0;
        }
    </style>
    <div class="scroll-slider -full-slide">
        <div>..</div>
        <img src="">
    </div>

    Config

    Want more control on the base styles, then the CSS variables, here are the following SCSS variables you can modify.

    $enable-scroll-overflow-fix: true !default;
    
    $scroll-gap: 0.5em !default;
    $scroll-padding-y: 1rem !default;
    $scroll-padding-x: 1.25rem !default;
    
    // Item
    $scroll-align: center !default;
    $scroll-stop: always !default;
    $scroll-stop-fine: normal !default;

    Tips

    Down here some useful tips to enhance your slider.

    Adding a navigation

    You can create a navigation for the slider, by using an anchor hash link pagination,

    and using the @fylgja/pagination as CSS component for the style.

    If don't like the hash to appear in your url, you can add a little javascript to enhance this behavior,

    and remove the hash from your url.

    Example of the HTML and Javascript pagination
    <div class="scroll-slider">
        <div id="scroll-item-1">..</div>
        <div id="scroll-item-2">..</div>
    </div>
    <div class="pagination my-1" aria-label="pagination">
        <a href="#scroll-item-1" class="pagination-link" onclick="scrollToElement()">
            <span><span class="aria-hidden">Go to slide </span>1</span>
        </a>
        <a href="#scroll-item-2" class="pagination-link" onclick="scrollToElement()">
            <span><span class="aria-hidden">Go to slide </span>2</span>
        </a>
    </div>
    <script>
        const scrollToElement = () => {
            const id = event.target.attributes.href.value.split("#")[1];
            event.preventDefault();
            document.getElementById(id).scrollIntoView();
        }
    </script>

    An event listener would have been better. But this is just sample 😉

    Hiding or Changing the scrollbar

    By default we don't hide or change the scrollbar.

    If you slider requires a more custom style use the @fylgja/scrollbar component, adding the thin or hide class.

    Install

    npm i @fylgja/scroll-slider

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    31

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    7.82 kB

    Total Files

    7

    Last publish

    Collaborators

    • grimlink