virtualSlides

Renders only the active slide ± N nearby slides. Ideal for sliders with hundreds of slides or heavy content per slide.

Import

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

new Slider('#el', {
  plugins: [
    virtualSlides({
      preRender: 2,
      cache: true,
    }),
  ],
})

Option	Type	Default	Description
`preRender`	`number`	`2`	Number of slides to pre-render on each side of the active slide.
`cache`	`boolean`	`true`	Don't re-render already rendered slides.

Slides use data-src as a deferred content marker. The plugin reads it and injects the real image src when the slide is within the render window.

<div class="c--slider-a__slide" data-slide>
  <img data-src="/heavy-image.jpg" alt="..." />
</div>