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?

soktinpk · Accepted Answer · 2014-11-05 02:52:27Z

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>

Can you explain this line: counter = (counter + 1) % slides.length; It looks great I'm just not too sure how that bit works — apaul
– apaul, Commented Nov 5, 2014 at 3:38
@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. — soktinpk
– soktinpk, Commented Nov 5, 2014 at 3:39

Stack Exchange Network

Using both setInterval and setTimeout for simple image carousel

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Using both setInterval and setTimeout for simple image carousel

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions