Fixed start index

Pass startIndex to open the slider at any slide on init. Index is 0-based. The slider is fully functional from there — navigation, loop, everything works normally.

1
2
3 ← starts here
4
5
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 ← starts here</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>
.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; }
.c--slider-a__pagination { display: flex; justify-content: center; gap: 6px; padding: 12px 0; }
.c--slider-a__pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.c--slider-a__pagination-bullet--active { background: #6C2BD9; transform: scale(1.3); }
.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

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

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

  &__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
  }

  &__pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;

    &--active {
      background: #6C2BD9;
      transform: scale(1.3);
    }
  }
}
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  startIndex: 2, // 0-based — opens at slide 3
  loop: true,
  plugins: [
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

From URL query param

Read the slide index from the URL (?slide=N) so users can deep-link directly to a specific item. Useful for shared links, notifications, or pagination state in the browser history.

1
2
3
4
5

Add ?slide=3 to the URL and refresh to open at slide 4.

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>
<!-- Add ?slide=2 to the URL to open at slide 3 -->
.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; }
.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'

// Read ?slide=N from the URL (0-based)
const params = new URLSearchParams(window.location.search)
const startIndex = Math.max(0, parseInt(params.get('slide') ?? '0', 10))

new Slider('#my-slider', {
  startIndex,
  loop: true,
  plugins: [arrows(), pagination({ type: 'dots', clickable: true })],
})

Remember last visited slide

Persist the active slide index in sessionStorage so users come back to where they left off — useful in tabs, modal galleries, or multi-step flows where the user might navigate away and return.

1
2
3
4
5

Navigate to a different slide, then refresh the page — it will reopen at the same slide.

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>
.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; }
.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 KEY = 'my-slider-index'
const saved = parseInt(sessionStorage.getItem(KEY) ?? '0', 10)

const slider = new Slider('#my-slider', {
  startIndex: saved,
  loop: true,
  plugins: [arrows(), pagination({ type: 'dots', clickable: true })],
})

// Persist on every slide change
slider.on('afterSlideChange', ({ index }) => {
  sessionStorage.setItem(KEY, String(index))
})