<div class="wrapper">

  <div class="carousel">

    <button type="button" id="carousel-arrow-prev" class="carousel-arrow carousel-arrow-prev" arial-label="Image précédente"></button>
    <button type="button" id="carousel-arrow-next" class="carousel-arrow carousel-arrow-next" arial-label="Image suivante"></button>

    <img id="carousel-0" class="carousel-img carousel-img-displayed" src="http://res.cloudinary.com/dnqehhgmu/image/upload/v1509718497/winter_cttfdr.jpg" alt="Winter" />
    <img id="carousel-1" class="carousel-img carousel-img-noDisplay" src="http://res.cloudinary.com/dnqehhgmu/image/upload/v1509718497/sea_ej0zoc.jpg" alt="Sea" />
    <img id="carousel-2" class="carousel-img carousel-img-noDisplay" src="http://res.cloudinary.com/dnqehhgmu/image/upload/v1509718497/night_pw1bpm.jpg" alt="Night" />
    <img id="carousel-3" class="carousel-img carousel-img-noDisplay" src="http://res.cloudinary.com/dnqehhgmu/image/upload/v1509718497/mountain_dekhfd.jpg" alt="Moutain" />
    <img id="carousel-4" class="carousel-img carousel-img-noDisplay" src="http://res.cloudinary.com/dnqehhgmu/image/upload/v1509718497/desert_zy3uth.jpg" alt="Desert" />

  </div>

</div>

/* Container */

.wrapper {
  width: 800px;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

.carousel {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  background: #ddd;
}

/* Images */

.carousel-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  -webkit-transition: opacity ease-out 0.5s;
  transition: opacity ease-out 0.5s;
}

.carousel-img-displayed {
  display: block;
  opacity: 1;
  z-index: 2;
}

.carousel-img-hidden {
  display: block;
  opacity: 0;
  z-index: 1;
}

.carousel-img-noDisplay {
  display: none;
}

/* Flèches de défilement */

.carousel-arrow {
  z-index: 3;
  display: block;
  position: absolute;
  width: 36px;
  height: 36px;
  top: 50%;
  margin-top: -18px;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  background-image: url("http://res.cloudinary.com/dnqehhgmu/image/upload/v1509720334/blue-arrow_jk1ydw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  -webkit-transition: background-size 0.15s ease-out;
  transition: background-size 0.15s ease-out;
}

.carousel-arrow:hover,
.carousel-arrow:focus {
  background-size: 22px 22px;
}

.carousel-arrow-next {
  right: 20px;
}

.carousel-arrow-prev {
  left: 20px;
  -webkit-transform: rotateZ(180deg);
  -ms-transform: rotate(180deg);
  transform: rotateZ(180deg);
}

document.getElementById('carousel-arrow-next').addEventListener('click',carouselSwipe,false);
document.getElementById('carousel-arrow-prev').addEventListener('click',carouselSwipe,false);

/**
 * Switch header carousel to next image (swipe right)
 */
function carouselSwipe() {
	
    // Récupère les numéros de l'ancienne et la nouvelle image
    var currentImg = document.getElementsByClassName('carousel-img-displayed')[0].id.substring(9);
	var newImg = parseInt(currentImg);
    
    // Gestion du début et de la fin de la liste d'images
	if (this.id == 'carousel-arrow-next') {
        newImg++;
        if (newImg >= document.getElementsByClassName('carousel-img').length) {
            newImg = 0;
        }
	} else if (this.id == 'carousel-arrow-prev') {
        newImg--;
        if (newImg<0) {
            newImg = document.getElementsByClassName('carousel-img').length-1;
        }
    }
    
	// Disparition progressive de l'ancienne image
    document.getElementById('carousel-'+currentImg).className = 'carousel-img carousel-img-hidden';
	
    // Apparition progressive de la nouvelle image
    var displayedCarousel = document.getElementById('carousel-'+newImg);
	displayedCarousel.className = 'carousel-img carousel-img-hidden';
	setTimeout(function() {
		displayedCarousel.className = 'carousel-img carousel-img-displayed';
	},20);
    
    // Disparition totale de l'ancienne image
	setTimeout(function() {
		document.getElementById('carousel-'+currentImg).className = 'carousel-img carousel-img-noDisplay';
	},520);
    
}