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​

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
    (static coordinates with dynamic alignment).

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();