animated carousel test

by Richard Hunter

HTML

<div class="image-container">
  <div class="image-container__slides image-container__slides--fade">
    <div class="image alpha"></div>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image beta"></div>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image gamma image--last"></div>
  </div>
</div>

SCSS

.image-container {

  &__slides {
    display: none;

    &--fade {
      transition: opacity 1.5s ease-in;
    }
  }
}
.alpha {
  background: coral;
}
.beta {
  background: dodgerblue;
}
.gamma {
  background: seagreen;
}
.image {
  width: 100px;
  height: 100px;
}

JavaScript

class ImageSlider {
  constructor() {
    this.slides = document.querySelectorAll(".image-container__slides");
    this.slideIndex = 0;
    console.log(this.slides.length);
    this.showSlides();
  }

  showSlides() {
    let i;
    // Display all images as none
    for (i = 0; i < this.slides.length; i++) {
      this.slides[i].style.display = "none";
      this.slides[i].style.opacity = "0.2";
    }
    this.slideIndex++;
    // Check to see if the slideIndex is higher than number of images
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    // Assign one image to be displayed
    this.slides[this.slideIndex - 1].style.display = "block";
    document.body.offsetHeight;
    this.slides[this.slideIndex - 1].style.opacity = "0.80";
    // Cycle through images every 5 seconds
    setTimeout(() => {
      this.showSlides();
    }, 5000);
  }
}
new ImageSlider();