How can I style the second, third, and fourth slides after the currently active slide in the Webflow Slider using CSS or JavaScript?

TL;DR

Use JavaScript to detect the current .w--current slide and dynamically assign classes (future-slide-1, future-slide-2, future-slide-3) to the next three slides.
Add custom CSS targeting those classes to style the upcoming slides, and ensure the script updates on page load and slider navigation events.

To style the second, third, and fourth slides after the currently active slide in the Webflow Slider, you'll need to use custom JavaScript because Webflow's native slider component only exposes styling for the current (active) slide, not future slides.

1. Understand Webflow’s Slider Structure

Webflow slider uses the class .w-slider for the main container.
Slides are found in a wrapper with class .w-slider-mask, and each slide uses the .w-slide class.
The currently active slide gets the class .w--current.
Other slides have no state-specific class, so you’ll need JavaScript to determine relative positions.

2. Add Custom Script to Target Future Slides

You can use JavaScript to inspect which slide is active, then style the next 3 slides after it.

Place this code inside a Before </body> tag embed in Page Settings or using an Embed component within the page.

<script>
  function updateFutureSlides() {
    const slides = document.querySelectorAll('.w-slide');
    const activeIndex = Array.from(slides).findIndex(slide => slide.classList.contains('w--current'));

    slides.forEach((slide, index) => {
      slide.classList.remove('future-slide-1', 'future-slide-2', 'future-slide-3');
    });

    if (slides[activeIndex + 1]) slides[activeIndex + 1].classList.add('future-slide-1');
    if (slides[activeIndex + 2]) slides[activeIndex + 2].classList.add('future-slide-2');
    if (slides[activeIndex + 3]) slides[activeIndex + 3].classList.add('future-slide-3');
  }

  const slider = document.querySelector('.w-slider');
  if (slider) {
    updateFutureSlides(); // on page load

    slider.addEventListener('click', () => {
      setTimeout(updateFutureSlides, 100); // delay to let slider transition
    });

    document.querySelectorAll('.w-slider-dot, .w-slider-arrow-left, .w-slider-arrow-right').forEach(control => {
      control.addEventListener('click', () => {
        setTimeout(updateFutureSlides, 100);
      });
    });
  }
</script>

3. Add Custom Styling in Webflow

Once the classes future-slide-1, future-slide-2, and future-slide-3 are dynamically assigned, you can style them using custom CSS embedded into the page:

<style>
  .future-slide-1 {
    opacity: 0.8;
    transform: scale(0.95);
  }

  .future-slide-2 {
    opacity: 0.6;
    transform: scale(0.9);
  }

  .future-slide-3 {
    opacity: 0.4;
    transform: scale(0.85);
  }
</style>

You can paste this CSS into the Page Settings → Custom Code → Inside <head> tag or use an Embed component.

4. Optional: Use Webflow Interactions Instead

Alternatively, you could approximate some styling using slider change Webflow interactions, but you’ll have limited control and no built-in support for future slide targeting. JavaScript is more reliable for this use case.

Summary

To style the 2nd, 3rd, and 4th slides after the active one in a Webflow Slider:

Use JavaScript to dynamically apply custom classes (future-slide-1, future-slide-2, etc.) based on the current active slide.
Apply your desired CSS styles to those custom classes.
Make sure your JavaScript runs after the DOM is ready and updates on slider navigation events.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer