Skip to main content

SnapSlide

The SnapSlide class lets you create virtual slides in the Snap system.
When initializing a Snap instance, you can skip the slides parameter—child elements of the container will be used by default.
For custom logic, use SnapSlide directly.

Example​

Explore a basic example on CodePen:

Parameters​

container​

  • Type: HTMLElement | null
  • Default: none
  • The slide’s HTML element, or null for fully virtual slides.

props​

size​

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

virtual​

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

Accessors​

coord​

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

element​

  • Type: HTMLElement | null
  • Associated DOM element.

id​

  • Type: string
  • Slide ID.

index​

  • Type: number
  • Slide index.

isVisible​

  • Type: boolean
  • Whether the slide is currently visible.

magnets​

  • Type: number[]
  • Magnetic points (static coordinates with dynamic alignment).

progress​

  • Type: number
  • Movement progress from -1 to 1.

size​

  • Type: number
  • Slide size in pixels.

staticCoord​

  • Type: number
  • Static coordinate (unaffected by movement).

Methods​

resize()​

Resize the slide and trigger Snap layout reflow.

slide.resize();