JS Carousel

HTML

<button id="next">next</button>
<div id="carousel">
  <img class="carousel-img" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTeiCMhoMrQyPFOsY9cX1tUZm39RAVvWGI3KTt5j3MhYAbYtmqm">
  <img class="carousel-img"...

CSS

#carousel {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.carousel-img {
  display: none;
  position: absolute;
  min-width: 100%;
  min-height: 100%;
}

.carousel-img.visible {
  display: block;
}

JavaScript

//var carousel = document.getElementById('carousel');
var images = document.getElementsByClassName('carousel-img');

var imageVisible = 0;

// cette fonction affiche l'image suivante, et cache la précédente
function changerImage() {
	images[imageVisible].classList.remove('visible');
  imageVisible = (imageVisible + 1) % images.length;
  images[imageVisible].classList.add('visible');
}

document.getElementById('next').onclick = changerImage;