Multiples diaporamas en pur JavaScript

<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,1];
var diapos = ["diapo1", "diapo2"]
var demos = ["demo1", "demo2"]
affichage(1, 0 , 0);
affichage(1, 1, 1);

function boutons(n, no, dm) {
 affichage(diaporama[no] += n, no ,dm);
}

function actifIndic(n, no, dm) {
 affichage(diaporama[no] = n, no, dm);
}
	
function affichage(n, no, dm) {
  var i;
  var x = document.getElementsByClassName(diapos[no]);
	var indic = document.getElementsByClassName(demos[dm]);
  if (n > x.length) {diaporama[no] = 1}
  if (n < 1) {diaporama[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = "0";  
  }
	 for (i = 0; i < indic.length; i++) {
     indic[i].className = indic[i].className.replace(" numeros", "");
  }
  x[diaporama[no]-1].style.opacity = "1";  
	 indic[diaporama[no]-1].className += " numeros";
}

.cadre-diapo{

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

	}
	
	
.diapo1,.diapo2 {

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;

}