Skip to main content

Snap

Snap is a flexible, low-level carousel handler focused on precise control over movement, snapping, and interaction logic.
It does not impose layout or styling, making it suitable for fully custom carousels and experimental UI patterns.

Showcase​

More demos​

To explore more demos, click here.

Advantages​

  • Tracks slide progress and position with high precision
  • Rich callback system for fine-grained event handling
  • Configurable slide snapping and magnetic points
  • Adjustable movement friction and inertia
  • Mouse wheel, swipe, and drag interaction support
  • Custom slide sizes and gaps with CSS units support
  • Smooth, interpolated transitions
  • Built-in parallax utilities
  • Designed for highly customized layouts
  • and more...

Initialization​

caution

Snap does not apply any styles automatically.
You are responsible for positioning slides and updating their transforms via CSS and callbacks.

Basic usage:

<div class="carousel" id="carousel">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
  <div class="slide">6</div>
  <div class="slide">7</div>
</div>
.carousel {
  position: relative;
  width: 100vw;
  height: 50vw;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #ccc;
}
import { Snap } from "vevet";

const container = document.getElementById("carousel");

const carousel = new Snap({
  container,
  gap: 20
});

carousel.on("update", () => {
  carousel.slides.forEach(({ element, coord, isVisible }) => {
    element.style.transform = `translate(${coord}px, 0)`;
  });
});