Orbit

A sleek single-image banner slider with seamless looping, swipe support, hover-pause, and auto dots.

Initialization

orbit.slides({ IDs, interval, dots, pauseOnHover });

The elements referenced by IDs must exist in the DOM (the lib retries every 100ms if not). Their parent becomes the slider wrapper.

Option	Default	Description
`IDs`	`[]`	Array of element IDs to slide through, one at a time.
`interval`	`4000`	Auto-advance interval (ms).
`dots`	`true`	Show navigation dots.
`pauseOnHover`	`true`	Pause auto-advance on mouse enter.

Example

<div id="banner">
  <img id="ic1" src="slide1.jpg">
  <img id="ic2" src="slide2.jpg">
  <img id="ic3" src="slide3.jpg">
</div>

orbit.slides({
  IDs: ['ic1', 'ic2', 'ic3'],
  interval: 5000,
  dots: true
});

Behavior notes

Clones first/last slides for a seamless infinite loop.
Touch swipe (left/right) navigates; a 50px threshold decides direction.
An IntersectionObserver starts the timer only when visible.
If the wrapper has zero height it forces a min-height: 300px.

Idempotency: Orbit guards against double-init (a wrapper that already contains .orbit-track is skipped), so calling slides() twice on the same markup won’t blank the content.