Using both setInterval and setTimeout for simple image carousel I have a really basic image carousel that I just wrote. 

Basically I'm trying to keep it as small and light weight as possible, but I get the feeling that I've gotten way off the beaten path of how these things normally work.



function hide(element, index, array) {
  if (index &gt; 0) {
    slides[index].setAttribute('style', 'opacity:0;');
  }
}

var carousel = document.getElementById("carousel"),
  slides = carousel.getElementsByTagName('li'),
  counter = 0,
  liList = Array.prototype.slice.call(slides);

setInterval(function() {
  slides[counter].setAttribute('style', 'opacity:1;');
  counter++;

  if (counter == slides.length) {
    counter = 0;
    setTimeout(function() {
      liList.forEach(hide);
    }, 3000); // setTimeout
  }
}, 3000); // setInterval
#carousel {
  padding: 0;
  margin: 0;
  position: relative;
  width: 315px;
  height: 177px;
}
#carousel li {
  opacity: 0;
  list-style: outside none none;
  width: 315px;
  position: absolute;
  background: #fff;
  transition: opacity 1s;
}
&lt;ul id="carousel"&gt;
  &lt;li style="opacity:1;"&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/labyrinth.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet2.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/FireRing2.jpg" alt="" /&gt;
  &lt;/li&gt;
&lt;/ul&gt;




Could this be trimmed down further, is this a bad way to go about something this simple, or am I just over thinking it?
How about this: every 3 seconds, you hide the previous image and show the next image. This is simple.

Some changes I made:


I prefer .style.opacity = as opposed to setAttribute("style"). This may be personal preference, but it looks cleaner to me because it uses javascript's object access instead of setting it via a string.
You can use a modulus (%) instead of checking if counter === slides.length.




var carousel = document.getElementById("carousel"),
  slides = carousel.getElementsByTagName('li'),
  counter = 0,
  liList = Array.prototype.slice.call(slides);

setInterval(function() {
  slides[counter].style.opacity = 0; // Hide the previous image
  counter = (counter + 1) % slides.length; // Increment counter
  slides[counter].style.opacity = 1; // Show the next image
}, 3000); // setInterval
#carousel {
  padding: 0;
  margin: 0;
  position: relative;
  width: 315px;
  height: 177px;
}
#carousel li {
  opacity: 0;
  list-style: outside none none;
  width: 315px;
  position: absolute;
  background: #fff;
  transition: opacity 1s;
}
&lt;ul id="carousel"&gt;
  &lt;li style="opacity:1;"&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/labyrinth.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet2.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/FireRing2.jpg" alt="" /&gt;
  &lt;/li&gt;
&lt;/ul&gt;