Live slider state

getInfo() returns a snapshot of the full slider state at any point in time: current index, total slides, direction, whether it's animating, and more. Call it inside afterInit or afterSlideChange to react to state changes — or call it imperatively from a button handler. Useful for building custom navigation UIs, analytics tracking, or syncing external state.

Navigate the slider to see getInfo() output...

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>
<pre id="info-output">Navigate to see getInfo() output…</pre>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

pre {
  margin-top: 1rem; padding: 12px 16px;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  font-size: 0.78rem; line-height: 1.6; overflow-x: auto;
  max-height: 200px; overflow-y: auto;
}

pre {
  margin-top: 1rem;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.6;
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }
}

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

const output = document.getElementById('info-output')

const slider = new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
  on: {
    afterInit: () => renderInfo(),
    afterSlideChange: () => renderInfo(),
  },
})

function renderInfo() {
  const { index, total, direction, isAnimating } = slider.getInfo()
  output.textContent = JSON.stringify({ index, total, direction, isAnimating }, null, 2)
}

Custom navigation UI from getInfo()

Use getInfo() to build a completely custom navigation component. Here, prev/next buttons are disabled at the boundaries and a label shows the current slide title — all driven by the slider state, not hardcoded DOM manipulation.

Introduction

Features

Pricing

Get started

Introduction

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide" data-title="Introduction">Slide 1</div>
    <div class="c--slider-a__slide" data-title="Features">Slide 2</div>
    <div class="c--slider-a__slide" data-title="Pricing">Slide 3</div>
    <div class="c--slider-a__slide" data-title="Get started">Slide 4</div>
  </div>
</div>
<div class="custom-nav">
  <button id="btn-prev">← Prev</button>
  <span id="nav-label">Introduction</span>
  <button id="btn-next">Next →</button>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

.custom-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 12px;
}
.custom-nav button {
  padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.82rem; font-weight: 500;
}
.custom-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
#nav-label { font-size: 0.9rem; font-weight: 600; color: #374151; }

.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
}

.custom-nav button {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
}

.custom-nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#nav-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }
}

import { Slider } from '@andresclua/sliderkit'

const slides = document.querySelectorAll('.c--slider-a__slide')
const btnPrev = document.getElementById('btn-prev')
const btnNext = document.getElementById('btn-next')
const label   = document.getElementById('nav-label')

const slider = new Slider('#my-slider', {
  loop: false,
  on: {
    afterInit:       () => sync(),
    afterSlideChange: () => sync(),
  },
})

function sync() {
  const { index, total } = slider.getInfo()
  const title = slides[index]?.getAttribute('data-title') ?? ''
  label.textContent = title
  btnPrev.disabled = index === 0
  btnNext.disabled = index === total - 1
}

btnPrev.addEventListener('click', () => slider.prev())
btnNext.addEventListener('click', () => slider.next())