Scroll-slider

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

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/scroll-slider" with ($scroll-layer: "components");
// Or via PostCSS and other options as native CSS
@import "@fylgja/scroll-slider" layer(components);

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;
        --gap-block: 0.5em;
    }
</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-padding: 1.25em !default;
$scroll-gap: 0.5em !default;
$scroll-align: start !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.

<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-only">Go to slide </span>1</span>
    </a>
    <a href="#scroll-item-2" class="pagination-link" onclick="scrollToElement()">
        <span><span class="aria-only">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>

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.