Configurable customisable extendable smooth bring your own whatever slider API.

  • 0000

    --

    "Toast"

    33.23¥

  • 0001

    --

    "Fish but no Head"

    33.23¥

  • 0002

    --

    "Hotdog"

    33.23¥

  • 0003

    --

    "Ramen Bowl"

    33.23¥

  • 0004

    --

    "Just a Fungus"

    33.23¥

  • 0005

    --

    "Cake Slice"

    33.23¥

Configurable customisable extendable smooth bring your own whatever slider (or carousel?) API.

Configure Away.

Through callback functions running with the slider, and an evet API interface.

  • Setup

    • CSS based styling.

      Style your slides as you want, size to offsets, fully in CSS.

    • Infinite.

      Automatically loop through slides and repeat them, or simply have a start and stop point.

    • Snapping.

      Set if slides are self centering or are allowed to be dragged freely.

  • Options

    • Drag speed.

      Set how powerful the dragging event and the horizontal trackpad gesture moves the slides.

    • Conditional activation.

      Decide which screen sizes or any condition that turn the slider on or off.

    • Lerp/Damp speed.

      Choose how fast the slider settles and smoothly gets to the target position, consistent through different screens refresh rate.

  • Customize

    • Extensible API.

      Extend behaviour and functionality as you please as it’s built for that (and has a nice interface for it).

    • Configuration setups.

      Pre made slider for most common behaviours, or create your own.

Read parameters for state and animation.

Through callback functions running with the slider, and an evet API interface.

CONFIGURE

READ

SPEED 0.000

+0

  • CURRENT 0.000

  • TARGET 0.000

  • PROGRESS 0.000

EVENTS

  • [SLIDE] SETTLED #0
  • [SLIDER] IN VIEW
  • [SLIDER] INITIALISED

  • NO 000

    • PARALLAX 0.000

  • NO 001

    • PARALLAX 0.000

  • NO 002

    • PARALLAX 0.000

  • NO 003

    • PARALLAX 0.000

  • NO 004

    • PARALLAX 0.000

  • NO 005

    • PARALLAX 0.000

  • NO 006

    • PARALLAX 0.000

  • NO 007

    • PARALLAX 0.000

  • NO 008

    • PARALLAX 0.000

  • NO 009

    • PARALLAX 0.000

  • NO 0010

    • PARALLAX 0.000

  • NO 0011

    • PARALLAX 0.000

  • NO 0012

    • PARALLAX 0.000

  • NO 0013

    • PARALLAX 0.000

WebGL utilities.

Kinda tested it around in all major frameworks/plaforms, and made some hooks.

webgl
ready

Works everywhere.

I think. Kinda tested it around in all major frameworks/plaforms, and made some hooks.

  • Vanilla implementation.

    Vanilla implementation.

    It's just Javascript (and Typescript actually) so it kinda just works.

  • Framework agnostic.

    Framework agnostic.

    It's just javascript (and typescript actually) so it kinda just works.

  • Webflow ready.

    Webflow ready.

    It's just javascript (and typescript actually) so it kinda just works.

open
source

AKA fix it yourself.

Doesn't work? Feel free to PR. Or just tell me and I swear I'll do my best.

In Use.

Using Smooothy?

Slap your website here thanks <3
A smoothie