Text Simple JS Text Slideshow

by Matthew Schenker

HTML

<div class="slide-container">
  <ul>
    <li class="slide">THIS IS THE TEXT THAT WE WANT TO DISPLAY FIRST!</li>
    <li class="slide">HERE WE HAVE OUR SECOND SLIDE OF TEXT, WHICH LOOKS VERY NICE AND IS LONGER THAN THE FIRST SLIDE WE JUST SAW, IN FACE IT IS ALMOST TWICE AS LONG AS THAT ONE TO BE ACCURATE.</li>
    <li class="slide">HERE IS A KIND OF MIDDLE-LENGTH BIT OF TEXT, SOMEWHERE BETWEEN THE FIRST ONE AND THE SECOND ONE.</li>
  </ul>
</div>

CSS

.slide-container {
	margin: 0 20px 0 auto;
	width: 100%;
}

.slide {
	opacity: 0;
	padding: 10px;
	text-align: center;
}

li {
	position: absolute;
	transition: opacity 3.5s ease-in;
	list-style: none;
}

JavaScript

var current = 0,
    slides = document.getElementsByTagName("li");

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;
}, 5000);