Minimal Slideshow With Scale & Fade Transitions

Preview:

Description:

An automatic slideshow/carousel that automatically transitions between slides with CSS3 powered scale and fade animations.

How to use it:

Create slides for the slideshow/carousel.

<div>
  <div class="slide">
    <h1>Vanilla</h1>
  </div>
  <div class="slide">
    <h1>Carousel</h1>
  </div>
  <div class="slide">
    <h1>Slider</h1>
  </div>
</div>

The necessary CSS for the slides.

.slide {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  transform: scale(0.9);
  opacity: 0.8;
  transition: all 0.5s ease-in-out;
}

.showing {
  z-index: 1;
  transform: none;
  opacity: 1;
}

The core functions for the slideshow/carousel.

const first = document.querySelector('.slide');
const slide = () => {
  const before = document.querySelector('.showing');
  if (before) {
    before
      .classList
      .remove('showing');
    const next = before.nextElementSibling;
    if (next) {
      next
        .classList
        .add('showing')
    } else {
      first
        .classList
        .add('showing');
    }
  } else {
    first
      .classList
      .add('showing');
  }
}
slide();

Set the interval between slides.

setInterval(slide, 1500);