Hooks

Lifecycle callbacks that fire at key moments in the slider — slide changes, drag events, resize, and destroy. Use them to drive GSAP animations or any custom side effects without touching slider internals.

Import

import { hooks } from '@andresclua/sliderkit-plugins'

Callbacks

Callback	Context	When it fires
`onInit`	`{ slides, slider }`	Once, after the slider finishes initialising.
`beforeChange`	`{ outgoing, incoming, direction }`	Before the transition starts. `outgoing` is the currently-visible slide (or `null` on first change); `incoming` is the one about to appear; `direction` is `'forward'` or `'backward'`.
`afterChange`	`{ slide, direction }`	After the transition ends. `slide` is the now-visible slide.
`onDragStart`	`{ event? }`	User starts a touch swipe or mouse drag.
`onDragEnd`	`{ event? }`	User releases after a touch swipe or mouse drag.
`onResize`	`{ breakpoint, items }`	After a responsive breakpoint change. `items` is the new slide count in view.
`beforeDestroy`	—	Just before `slider.destroy()` cleans up.

Basic example

import { Slider } from '@andresclua/sliderkit'
import { arrows, hooks } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop:  true,
  speed: 400,
  plugins: [
    arrows(),
    hooks({
      onInit({ slides }) {
        console.log('Ready with', slides.length, 'slides')
      },
      beforeChange({ incoming, direction }) {
        console.log('Going', direction, '→', incoming)
      },
      afterChange({ slide }) {
        console.log('Now showing', slide)
      },
    }),
  ],
})

GSAP fade transition

Use beforeChange and afterChange to cross-fade slides with GSAP while the slider still handles layout and touch:

import gsap from 'gsap'
import { Slider } from '@andresclua/sliderkit'
import { hooks } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items:   1,
  loop:    true,
  speed:   0,        // let GSAP own the animation
  plugins: [
    hooks({
      beforeChange({ outgoing, incoming }) {
        gsap.set(incoming,  { autoAlpha: 0 })
        gsap.to(outgoing,   { autoAlpha: 0, duration: 0.35, ease: 'power2.in' })
        gsap.to(incoming,   { autoAlpha: 1, duration: 0.35, ease: 'power2.out', delay: 0.2 })
      },
    }),
  ],
})

GSAP staggered entrance

Stagger child elements of each incoming slide using afterChange:

hooks({
  afterChange({ slide }) {
    gsap.from(slide.querySelectorAll('.card'), {
      y:        40,
      autoAlpha: 0,
      stagger:  0.08,
      duration: 0.5,
      ease:     'back.out(1.4)',
      clearProps: 'all',
    })
  },
})

Direction-aware slide-in

hooks({
  beforeChange({ outgoing, incoming, direction }) {
    const sign = direction === 'forward' ? 1 : -1
    gsap.set(incoming,  { x: sign * 80, autoAlpha: 0 })
    gsap.to(outgoing,   { x: -sign * 40, autoAlpha: 0, duration: 0.3 })
    gsap.to(incoming,   { x: 0, autoAlpha: 1, duration: 0.45, ease: 'power3.out', delay: 0.1 })
  },
})

onInit — set initial states

hooks({
  onInit({ slides }) {
    // hide all but the first
    gsap.set(slides.slice(1), { autoAlpha: 0 })
  },
})

Behaviour notes

All callbacks are optional — pass only the ones you need.
The hooks plugin adds no DOM nodes and no CSS.
When speed: 0 is set, afterChange fires immediately after beforeChange — let GSAP control timing with its own duration.
onDragStart fires for both touch and mouse drag events.

See it live in the Hooks demo →