Skip to main content

SnapSlide

The SnapSlide class allows you to create virtual slides within the Snap system.
When initializing a Snap instance, you may omit the slides parameter — in this case, the container's child elements will be used automatically.
For advanced or fully custom logic, you can work with SnapSlide directly.

Basic Demo​

HTML
<div class="fullpage-center">
  <div class="carousel" id="carousel"></div>
</div>
CSS
.fullpage-center {
  padding-inline: 1.25rem;
}

.carousel {
  position: relative;
  width: 100%;

  height: 50vw;
  max-height: 50vh;

  opacity: 0;
  transition: opacity 0.25s linear;
}

.carousel.ready {
  opacity: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
}
JavaScript
import {
  Snap,
  SnapSlide
} from "vevet";

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

const createSlides = count => {
  const slides = new Array(count).fill(0).map((item, index) => {
    const size = "40vw";

    const element = document.createElement("div");
    element.className = "slide";
    element.innerHTML = `<span>${index}</span>`;
    element.style.width = size;

    return new SnapSlide(element, {
      size,
      virtual: true
    });

  });

  return slides;
};

const carousel = new Snap({
  container,
  slides: createSlides(500),
  gap: "1.25rem",
  grabCursor: true,
  loop: true,
  origin: "center"
});

container.classList.add("ready");

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

Parameters​

container​

  • Type: HTMLElement | null
  • Default: none
  • The slide's associated HTML element.
    Use null to create a fully virtual slide without a DOM element.

props​

size​

  • Type: 'auto' | 'stretch' | number | string
  • Default: 'auto'
  • Defines the slide size:
    • 'auto' — Based on the element size or container size.
    • 'stretch' — Always matches the container size.
    • number — Size in pixels.
    • CSS units such as px, rem, vw, vh, svh.

virtual​

  • Type: boolean
  • Default: true
  • If enabled, the slide is treated as virtual and will be appended to the container only when it becomes visible.

Accessors​

coord​

  • Type: number
  • Current slide coordinate in pixels (X or Y, depending on Snap direction).

element​

  • Type: HTMLElement | null
  • The associated DOM element, if any.

id​

  • Type: string
  • Unique slide identifier.

index​

  • Type: number
  • Slide index within the Snap instance.

isVisible​

  • Type: boolean
  • Indicates whether the slide is currently visible.

magnets​

  • Type: number[]
  • Magnetic snap points for the slide in track coordinates. Positions depend on the Snap origin mode ('start', 'center', or 'end').

progress​

  • Type: number
  • Normalized slide movement progress, from -1 to 1.

size​

  • Type: number
  • Slide size in pixels.

staticCoord​

  • Type: number
  • Static slide coordinate, unaffected by movement or animation.

Methods​

resize()​

Recalculate the slide size and trigger a Snap layout reflow.

slide.resize();