SSR

SliderKit is a client-side library that manipulates the DOM. It must only be instantiated in browser environments.

Next.js

'use client'
import { useEffect, useRef } from 'react'
import { Slider } from '@andresclua/sliderkit'

export function MySlider() {
  const ref = useRef(null)

  useEffect(() => {
    const slider = new Slider(ref.current)
    return () => slider.destroy()
  }, [])

  return (
    <div className="c--slider-a" ref={ref}>
      <div className="c--slider-a__wrapper">
        <div className="c--slider-a__slide" data-slide>Slide 1</div>
        <div className="c--slider-a__slide" data-slide>Slide 2</div>
      </div>
    </div>
  )
}

Nuxt / Vue

<template>
  <div class="c--slider-a" ref="sliderEl">
    <div class="c--slider-a__wrapper">
      <div class="c--slider-a__slide" data-slide>Slide 1</div>
      <div class="c--slider-a__slide" data-slide>Slide 2</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Slider } from '@andresclua/sliderkit'

const sliderEl = ref(null)
let slider = null

onMounted(() => { slider = new Slider(sliderEl.value) })
onBeforeUnmount(() => slider?.destroy())
</script>

Astro

---
// server-side: just HTML
---
<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide" data-slide>Slide 1</div>
  </div>
</div>

<script>
  // client-side only — runs in browser
  import { Slider } from '@andresclua/sliderkit'
  new Slider('#my-slider')
</script>

SvelteKit

<script>
  import { onMount, onDestroy } from 'svelte'
  import { Slider } from '@andresclua/sliderkit'

  let el
  let slider

  onMount(() => { slider = new Slider(el) })
  onDestroy(() => slider?.destroy())
</script>

<div class="c--slider-a" bind:this={el}>
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide" data-slide>Slide 1</div>
  </div>
</div>

Dynamic import guard

If you cannot use framework lifecycle hooks, guard the import:

if (typeof window !== 'undefined') {
  const { Slider } = await import('@andresclua/sliderkit')
  new Slider('#el')
}