Fading carousel

fading-carousel.js

function setParentHeight(elements) {
  var elements;
  var tallest = 0; 

  // loop through the elements and get the heights of each
  for(i = 0; i < elements.length; i++) {
    var el = elements[i];
    var elHeight = el.offsetHeight;
    // if this height is bigger than the previously 
    // set 'tallest' then set that as 'tallest'
    tallest = (elHeight>tallest ? elHeight : tallest);
  }
  // Select the first element and then add the 'tallest's height to its parent
  elements[0].parentNode.style.height = tallest + "px";
}

if(document.querySelector('.fading-carousel') !== null) {
  var current = 0,
      container = document.querySelector('.fading-carousel'),
      slides = container.querySelectorAll('.fading-carousel__item');

  // First set a height on the slides container - since the elements are 
  // positioned absolute (y)
  setParentHeight(slides);
  window.addEventListener( 'resize', function() {
    setParentHeight(slides);
  });

  // then wait for a while and go through each slide
  // switching opacity 1 to 0 - use css to transition it
  setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
  }, 6500);
}

// In css set the fading-carousel__item to position absolute and fade between slides with css transitions