Racket

A responsive 3-up image/card carousel with infinite looping, hover-pause, and mobile collapse.

Initialization

A global racket instance is created automatically; you can also use new Racket().

Methods

Method	Description
mount(selector)	Attach the slider to a container (CSS selector or element).
images(list)	Array of element IDs/selectors or image URLs. DOM nodes are cloned; their originals are hidden.
duration(ms)	Carousel interval (default 2000).
play()	Start auto-rotation (paused while hovered).
stop()	Stop auto-rotation.
next() / prev()	Manual advance / retreat.
onUpdate(fn)	Subscribe to slide-change callbacks.

Responsive behavior

• Desktop (width ≥ 768px): 3 slides per page.
• Mobile (< 768px): collapses to 1 slide (single-image slider).
• Resizing re-renders and resets to page 0.

Example (image IDs)

<div id="gallery">
  <img id="img1" src="a.jpg">
  <img id="img2" src="b.jpg">
  <img id="img3" src="c.jpg">
</div>

racket.images(['img1', 'img2', 'img3']);
racket.duration(2000);
racket.play();

Example (URLs)

racket.images(['a.jpg', 'b.jpg', 'c.jpg']).duration(2500).play();