Fylgja - 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 native CSS import, also supported by PostCSS import
@import "@fylgja/scroll-slider" layer("components");

How to use

For more information see the scroll-slider docs on the Fylgja.dev.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[1.1.1] - 2023-02-19

Changed

• Simplified @layer support, CSS can use native, for SCSS use the new variable $scroll-layer, the options from v1.1 are deprecated

[1.1.0] - 2023-02-05

Added

• support for @layer in components scope

[1.0.2] - 2022-06-06

Fixed

• Safari overflow end padding fix, by changing the @supports to a new rule only supported in Safari

[1.0.1] - 2021-10-10

Changed

• Moved overflow fix to only effect Safari, Firefox and Chrome have fixed this issue

[1.0.0] - 2021-06-22

Initial Release 🎉