Responsive Image Slider with Momentum Scrolling

Preview:

Description:

A responsive, full-width, horizontal image slider that automatically scrolls through a series of images as you scroll down the page. Ideal for image galleries, portfolios, storytelling,  and landing pages where visuals take center stage.

This slider features a Momentum Scrolling (also called inertial scrolling) function, which means the sliding animation continues briefly even after you stop scrolling vertically. This provides a smooth, natural scrolling effect to enhance user experience.

How to use it:

1. Create the HTML structure for the image slider. This involves setting up a container for the slider, the track that holds the images, and individual cards for each image.

<div class="slider">
  <div class="slider-track">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    ...
  </div>
</div>

2. Apply basic styling to the slider and add your images. The CSS below will center the slider on the page, make it full-width, and hide the scrollbar. You will then add your images as backgrounds to the individual cards.

.slider {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 95vw;
  overflow: hidden;
  scrollbar-width: none;
  &::-webkit-scrollbar { -webkit-appearance: none; }
  & .slider-track {
    width: max-content;
    display: flex;
    gap: 0.5rem;
    height: 60vmin;
    will-change: transform;
    & .card {
      aspect-ratio: 3/2;
      background-size: cover;
      background-position: center;
      &:nth-of-type(1) { background-image: url('1.jpg'); }
      &:nth-of-type(2) { background-image: url('2.jpg'); }
      &:nth-of-type(3) { background-image: url('3.jpg'); }
      ...
    }
  }
}

3. Enable scrolling behavior with this script:

const track = document.querySelector('.slider-track');
const easing = 0.05;
let startY = 0;
let endY = 0;
let raf;
const lerp = (start,end,t) => start * (1-t) + end * t;
function scrollHeight() {
  const diff = this.innerWidth - this.innerHeight;
  document.body.style.height = `${track.clientWidth - diff}px`;
}
function update() {
  startY = lerp(startY,endY,easing);
  track.style.transform = `translateX(${-startY}px)`;
  raf = requestAnimationFrame(update);
  startY.toFixed(1) === this.scrollY.toFixed(1) && cancelAnimationFrame(raf);
}
function start() {
  endY = this.scrollY;
  cancelAnimationFrame(raf);
  raf = requestAnimationFrame(update);
}
window.addEventListener('load',scrollHeight,false);
window.addEventListener('scroll',start,false);
window.addEventListener('resize',scrollHeight,false);