Diaporama en pur JavaScript

L'objectif de cette démonstration est de créer un simple diaporama en JavaScript avec un contrôle (boutons suivant et précédent) ainsi qu'un indicateur qui permet de savoir quelle image est affichée.

<div class="cadre-diapo">

<img class="diapo" src="1.jpg" alt>
<img class="diapo" src="2.jpg" alt>
<img class="diapo" src="3.jpg" alt>

<button class="precedent" aria-label="précédent" onclick="boutons(-1)">❮</button>

<button class="suivant" aria-label="suivant" onclick="boutons(1)">❯</button>

</div>

<div class=cadre-demo>

<button class="demo" onclick="actifIndic(1)">1</button> 
<button class="demo" onclick="actifIndic(2)">2</button> 
<button class="demo" onclick="actifIndic(3)">3</button>

</div>

var diaporama = 1;
affichage(diaporama);

function boutons(n) {
  affichage(diaporama += n);
}

function actifIndic(n) {
  affichage(diaporama = n);
}

function affichage(n) {
  var i;
  var diapoImg = document.getElementsByClassName("diapo");
  var indic = document.getElementsByClassName("demo");
  if (n > diapoImg.length) {diaporama = 1}    
  if (n < 1) {diaporama = diapoImg.length}
  for (i = 0; i < diapoImg.length; i++) {
     
	 diapoImg[i].style.opacity = "0";
  }
  for (i = 0; i < indic.length; i++) {
     indic[i].className = indic[i].className.replace(" numeros", "");
  }
  diapoImg[diaporama-1].style.opacity = "1";    
  indic[diaporama-1].className += " numeros";
}

.cadre-diapo{

margin: auto;
aspect-ratio: 3/2;
max-width: 960px;
position: relative;

	}
	
	
.diapo {

opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity 1s;
object-fit: cover;
width: 100%;
height: 100%;
	
}
	

 button{
	
border: none;
cursor: pointer
	
	}
	
.precedent,
.suivant{

color: silver;
transition: color .4s linear;
transform: translatey(-50%);
top: 50%;
padding: .5rem;
font-size: 2rem;
background: white;
position: absolute

	}

.precedent{left:0}
.suivant{right:0}
	
.precedent:hover,
.suivant:hover{

color: black

}
	
.numeros{
transition: background .4s linear;
color: white;
background: #7A5FFF
	
	}
	
.cadre-demo{

display: flex;
justify-content: center;

}