Basic lazy load

Use data-src instead of src on images. The plugin swaps it to src only when the slide is about to enter the viewport. Open DevTools → Network → Img to see each request fire as you navigate.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <!-- First slide loads immediately (no data-src) -->
    <div class="c--slider-a__slide img-slide" data-slide>
      <img src="/photos/01.jpg" alt="Slide 1" />
    </div>
    <!-- The rest are deferred -->
    <div class="c--slider-a__slide img-slide" data-slide>
      <img data-src="/photos/02.jpg" alt="Slide 2" />
    </div>
    <div class="c--slider-a__slide img-slide" data-slide>
      <img data-src="/photos/03.jpg" alt="Slide 3" />
    </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%; }

.img-slide { height: 260px; position: relative; overflow: hidden; background: #e5e7eb; }
.img-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.img-slide {
  height: 260px;
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}

.img-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

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

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

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    lazyLoad({ rootMargin: '200px' }), // start loading 200px before the slide enters
    arrows(),
    pagination({ type: 'dots', clickable: true }),
  ],
})

With loading placeholder

Show a skeleton or spinner while the image loads, then fade it in on load. The placeholder stays visible until the img load event fires — no flashing blank area.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide img-slide" data-slide>
      <div class="skeleton"></div>
      <img data-src="/photo.jpg" alt="..." class="lazy-img" />
    </div>
    <!-- ...more slides -->
  </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%; }

.img-slide { height: 260px; position: relative; overflow: hidden; }

/* Skeleton shimmer shown until image loads */
.skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.lazy-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.3s ease;
}
.lazy-img.loaded { opacity: 1; }

.img-slide {
  height: 260px;
  position: relative;
  overflow: hidden;
}

.skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0;
}

.lazy-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-img.loaded {
  opacity: 1;
}

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

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

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

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

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    lazyLoad({
      rootMargin: '300px',
      onLoad: (img) => img.classList.add('loaded'), // fade in on load
    }),
    arrows(),
  ],
})