Au click, toggle.class sur la suivante ou la precedente ?

Hello chers JS codeurs.
j'ai besoin d'aide pour un genre de carrousel.

J'ai une serie d'image dans des <a href class="item">.
Au clic "item" devient devient "item-aveclick", ce qui permet d’attribuer aux images des attributs css ( image en 100%, position fixed etc...).

Si j'arrivais avec 2 boutons "suivant" et "precedent", a faire passer "item-aveclick" d'un "ahref" à l'autre... j'aurais très simplement un carrousel sans modifier mon html, et sans rajouter du css.
Pour info Je ne peux pas remanier la façon dont les images sont hiérarchisées, pour de nombreuses raisons...

Merci pour votre aide éclairée...

<section id="page_2-1">

      <div class="les-boutons">
        <button class="bouton">
            &lt;
        </button>
        <button class="bouton">
            &gt;
        </button>
        </div>
        
        <div class="grid">
        <a href="javascript:void(0)" class="item style-2">
            <div class="item-content">
                <img src="webcontent/images/realisation/Book-produit_2.jpg" alt="Book-produit_2">
            </div>
        </a>

        <a href="javascript:void(0)" class="item style-1">
            <div class="item-content">
                <img src="webcontent/images/realisation/CDV_Alphatec.jpg" alt="CDV_Alphatec">
            </div>
        </a>

        <a href="javascript:void(0)" class="item style-2">
            <div class="item-content">
                <img src="webcontent/images/realisation/CDV_Christian-Domack_scupteur.JPG" alt="CDV_Christian-Domack_scupteur">
            </div>
        </a>

        <a href="javascript:void(0)" class="item style-2">
            <div class="item-content">
                <img src="webcontent/images/realisation/CDV_ENENE.jpg" alt="CDV_ENENE">
            </div>
        </a>

<script>
////////////
    
var selectionClass = document.getElementsByClassName('item');


function ajouteClass(elem) {
	elem.classList.toggle('item-aveclick');
}

for(let elementClick of selectionClass) {
		elementClick.addEventListener("click", function(){ ajouteClass(elementClick); });
};

////////////
    
var selectionClass2 = document.getElementsByClassName('item');
var iconmenu = document.getElementsByClassName('section2')[0];

function ajouteClass2() {
iconmenu.classList.toggle('section2-aveclick');
}

for(let elementClick2 of selectionClass2) {
		elementClick2.addEventListener("click", function(){ ajouteClass2(elementClick2); });
};
///////////
</script>

#section2 {
	min-height: 200vh;
	position: relative;
	background-color: hsl(195, 100%, 15%);
	background-image: url(../images/ARBRE-bleu_dbi_min.svg);
	background-size: 150%;
	background-position: 50% bottom;
	background-repeat: no-repeat;
	overflow: hidden;
}
.section2-aveclick{
    z-index: 99999;
}

#page_2-1 {
	color: white;
	height:auto;
    width: 90%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    margin: 0 auto;
    padding-top: 10px;
}

.grid {
	position: relative;
	transition: opacity 0.8s linear 1s;
    margin: 2% 5%;
}

.item {
  position: absolute;
  margin: 2%;
  z-index: 1;
}
.item-content {
  position: relative;
  cursor: pointer;
}
.item-content > img {
  display: block;
  border-radius: 7px;
}
.style-1 .item-content img{
	width: 20vw;
}
.style-2 .item-content img{
	width: 24vw;
}
.style-3 .item-content img{
	width: 35vw;
}
.style-4 .item-content img{
	width: 28vw;
}

.les-boutons{
    position: fixed;
    z-index: 999999;
    bottom: 4vh;
    right:5vh;
    width: 7vw;
    border:1px solid red;
}
.les-boutons .bouton{
    margin-left:1vh;
    font-size: 120%;
    font-weight: 900;
    color:white;
    background-color: black;
    border:none;
    padding: 5% 10%;
}

.item-aveclick {
	transform: translate(0) !important;
	position: fixed;
	margin: 0;
	top:0;
	left: 0;
	z-index: 99;
	width: 100vw;
	height: 100vh;
	background-color: white;
	transition: transform 0.5s !important;
}

.item-aveclick .item-content img{
	width: auto;
	max-width: 95vw;
	max-height: 90vh;
	margin: 5% auto;
}