Laufsteg NPM | npm.io

Features

💈 Endless horizontal scrolling in both directions
🤖 Automatic scrolling (with adjustable speed) & User scrolling
⚡️ Optimized for Performance (efficient reordering & CPU/GPU Usage)
🧈 Buttery smooooooooth
📱 Support for Touch-Devices
🙏🏽 Framework agnostic (Works with React, Vue, Svelte & even with Vanilla JS/TS)
🎁 Many more little things that make developers happy

Open TODOs / Currently not supported

If you want to help us with this, please have a look at our Contribution section

📏 Variable cell sizes
🔥 Updating options after initializing

Relevant Links

Full Documentation

Installation

Vanilla JS/TS

# pnpm
pnpm add laufsteg

# npm
npm i laufsteg

CDN

<script src="https://unpkg.com/laufsteg"></script>

This exposes laufsteg globally via window.laufsteg

React

# pnpm
pnpm add laufsteg-react

# npm
npm i laufsteg-react

Vue

# pnpm
pnpm add laufsteg-vue

# npm
npm i laufsteg-vue

Usage

The concrete usage depends on on the framework you are using.

For further information please have a look at the concrete adapters:

If you want to use laufsteg without any framework, or want to write an adapter on your own, you only have to do two simple things:

1. Use this DOM Structure

<div id="laufsteg-sample-1" className="laufsteg-container">
  <div className="laufsteg-trolley">
    <div className="laufsteg-cell">Your cell content goes here</div>
  </div>
</div>

There can be as many cells, as you want (with the same size). If there are not enough cells to fill the whole screen, laufsteg will automatically duplicate cells.

2. Call `createLaufsteg()`

import { createLaufsteg } from 'laufsteg'
...
const options: laufstegOptions = {...}
const container = document.getElementById("laufsteg-sample-1")
const laufsteg = createLaufsteg(container, options)
...

Motivation

We wanted to have a library with which we could easily create an infinite carousel in both directions. On the one hand, this should be able to scroll automatically, but the users should also be able to interact with it.

It was also very important to us to have a really smooth user experience, for which not least a great performance is necessary. Because we couldn't find a library that could offer us exactly that, we decided to write our own.