Docs / Libraries / Smooth
smooth.js

Smooth NEW in 5.10.0

A seamless, fluid, continuous infinite ticker slider powered by requestAnimationFrame delta-time rendering.

Unlike step-based carousels, Smooth scrolls endlessly without pausing. It uses a triple-cloned buffer and delta-time math so the speed stays uniform across 60/120/144 Hz displays.

Loading

<script src="./ven.js"></script>
<script src="./libs/smooth.js"></script>

A global smooth instance and the Smooth class are exposed on window.

Two APIs

1. Declarative — smooth.start(configs)

Pass one or many config objects. Smooth auto-initializes (and re-initializes on DOM changes, route changes, and window load) and tracks each carousel by its selector.

smooth.start([
  {
    selector: '#carousel-container',
    itemSelector: '.carousol-image',
    idPrefix: 'impact-carousel-image',
    speed: 80,
    direction: 'left'
  },
  {
    selector: '#schools-carousel-container',
    itemSelector: '.partner-logo',
    idPrefix: 'schools-carousel-logo',
    speed: 70,
    direction: 'right'
  }
]);

2. Chainable — smooth.mount(...)

smooth
  .mount('#carousel-container')
  .items(['img1', 'img2', 'img3', 'img4'])
  .speed(100)
  .direction('left')
  .play();

Config (declarative)

FieldDefaultDescription
selector— (required)Container element selector.
items / images—Array of element IDs/selectors or image URLs.
itemSelector"img"Fallback selector used to auto-collect items from the container.
idPrefixrandomPrefix assigned to auto-collected items (so they can be resolved).
speed60Pixels scrolled per second.
direction"left""left" or "right".
autoPlaytrueSet false to mount without starting.

Chainable methods

MethodDescription
mount(selector)Attach to a container (or pass a declarative config to start).
items(list) / images(list)Array of element IDs/selectors or image URLs.
speed(rate)Continuous speed in px/sec (clamped to ≥ 1).
direction(dir)"left" or "right".
play()Start the continuous loop.
stop()Halt the loop (cancels the animation frame).
onUpdate(fn)Telemetry callback: { scrollOffset, direction, speed, isPlaying, itemsPerPage }.

Responsive behavior

  • Desktop (width ≥ 768px): 3 slides per page.
  • Mobile (< 768px): 2 slides per page.
  • Resizing re-renders and rebuilds the track at the new breakpoint.

Notes

  • Original DOM nodes referenced by ID are hidden and cloned into the track (IDs are stripped on clones to avoid duplicates).
  • Default styling (.smooth-viewport, .smooth-track, .smooth-slide-item, .smooth-media-frame) is injected once automatically; override via CSS variables --smooth-image-ratio, --smooth-image-radius, --smooth-image-background, --smooth-image-fit.
  • Hover-pause is intentionally disabled for a constant ticker effect (the setPauseOnHover method is a no-op kept for compatibility).
← Back
Rinx