Using both setInterval and setTimeout for simple image carousel

Question

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?

Answer 1

How about this: every 3 seconds, you hide the previous image and show the next image. This is simple.

Some changes I made:

1. 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.
2. 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>

• apaul: Can you explain this line: counter = (counter + 1) % slides.length; It looks great I'm just not too sure how that bit works
• soktinpk: @apaul34208 Basically, it's a remainder operator. It's used frequently when looping back around an array. Example: 8 % 3 === 2 because 8 leaves a remainder of 2 when divided by 3. So when counter + 1 === slides.length, it resets to zero because slides.length / slides.length always leaves a remainder of 0.