Background parallax

A full-bleed background element moves at 40% of the slide speed, creating depth. The oversized inset (-40px) ensures no gap appears at the edges during the offset.

Slide 1

Slide 2

Slide 3

Slide 4

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide pslide" data-slide>
      <div class="pslide-bg" data-parallax></div>
      <span class="pslide-label">Slide 1</span>
    </div>
    <div class="c--slider-a__slide pslide" data-slide>
      <div class="pslide-bg" data-parallax></div>
      <span class="pslide-label">Slide 2</span>
    </div>
    <!-- data-parallax marks the element that moves slower -->
  </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%; }

.pslide { height: 260px; position: relative; overflow: hidden; }

/* Oversized so parallax offset never shows edges */
.pslide-bg {
  position: absolute;
  inset: -40px;
  background: #6C2BD9; /* or a background-image */
}

.pslide-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
  z-index: 1;
}

.pslide {
  height: 260px;
  position: relative;
  overflow: hidden;
}

.pslide-bg {
  position: absolute;
  inset: -40px;
  background: #6C2BD9;
}

.pslide-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  z-index: 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, parallax, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    parallax({ depth: 0.4 }), // background moves at 40% of slide speed
    arrows(),
    pagination({ type: 'dots', clickable: true }),
  ],
})

Image background parallax

The same technique with a real photo as the background. The image is larger than the slide and overflows, so the parallax offset reveals different portions of it — giving a natural camera-pan feel.

Mountains

Forest

Ocean

Desert

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide img-pslide" data-slide>
      <img src="/photo.jpg" alt="..." data-parallax class="pslide-img" />
      <span class="pslide-label">Mountains</span>
    </div>
    <!-- data-parallax on the img itself -->
  </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-pslide { height: 280px; position: relative; overflow: hidden; }

/* Wider than 100% so there's room to shift */
.pslide-img {
  position: absolute;
  inset: 0 -60px;
  width: calc(100% + 120px);
  height: 100%;
  object-fit: cover;
}

.pslide-label {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 20px;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  z-index: 1;
}

.img-pslide {
  height: 280px;
  position: relative;
  overflow: hidden;
}

.pslide-img {
  position: absolute;
  inset: 0 -60px;
  width: calc(100% + 120px);
  height: 100%;
  object-fit: cover;
}

.pslide-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  z-index: 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, parallax } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    parallax({ depth: 0.3 }),
    arrows(),
  ],
})