A carousel without the dependency baggage

An old MooTools carousel often combines layout, animation, input handling, and plugin state. For a new implementation, first ask whether the content actually needs a carousel. A normal grid is easier to scan when every item matters equally.

This revised guide preserves the historical topic but uses browser-native layout. For an existing installation, retain a copy of its exact plugin and MooTools Core version before replacing it.

Start with a scrollable list

.gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.gallery > li {
  flex: 0 0 min(80vw, 24rem);
  scroll-snap-align: start;
}

Use meaningful list markup and real links inside each item. This basic gallery supports touch scrolling and remains usable without an animation library. Keep the scrollbar available rather than hiding the only obvious sign that more content exists.

Add controls thoughtfully

If previous and next buttons are useful, make them real buttons with accessible names. Move the scroll position by a meaningful item width, and indicate when a direction has no more content. Do not move keyboard focus merely because the viewport moved.

Avoid autoplay. If you must rotate slides automatically, provide an obvious pause control and respect reduced-motion preferences. See the WAI carousel tutorial for interaction and accessibility considerations.

Retire the old widget safely

Check whether another component uses the same MooTools dependency before removing it. Compare keyboard navigation, item links, resize behavior, and empty-state rendering. Preserve the content and its URLs while changing the mechanism that displays it.