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 > 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;}<ul id=carousel>  <li style=opacity:1;>    <img src=http://pluggedinwebdesign.com/images/labyrinth.jpg alt= />  </li>  <li>    <img src=http://pluggedinwebdesign.com/images/RopesLittlePlanet2.jpg alt= />  </li>  <li>    <img src=http://pluggedinwebdesign.com/images/FireRing2.jpg alt= />  </li></ul>Could this be trimmed down further, is this a bad way to go about something this simple, or am I just over thinking it?
Using both setInterval and setTimeout for simple image carousel
javascript;optimization
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;}<ul id=carousel>  <li style=opacity:1;>    <img src=http://pluggedinwebdesign.com/images/labyrinth.jpg alt= />  </li>  <li>    <img src=http://pluggedinwebdesign.com/images/RopesLittlePlanet2.jpg alt= />  </li>  <li>    <img src=http://pluggedinwebdesign.com/images/FireRing2.jpg alt= />  </li></ul>