Lightbox next et previous comment faire

Bonjour à tous!
je galere avec ma lightbox! je debute en javascript, je comprends pas ce que je trouve sur le net alors si vous pouviez me lancer une bouee !! je suis sur un projet de photographe . j'ai un fichier .js ou je veux y mettre ses functions :

function displayLightBox(medias) {
    // On recreer chaque card Html stocker dans cardsDom
    const domLightBox = medias.map((media) => {
        //console.log(medias);
        return typeof media.image !== "undefined"
            ? `<img src="./assets/thumbnails/imagesMedias/${media.image}" alt="imagecloseup view" class="hide" data-media-lightbox="${media.id}"/>`
            : `<video controls width="250" class="hide"><source src="./assets/thumbnails/videosMedias/${media.video}" type="video/mp4"></video>
               <div class="lightbox__title"> ${media.title}`;
    })
    //("")  permet de supprimer les , d'un array*/
    document.querySelector(".lightbox__content").innerHTML = domLightBox.join("");
}

function openLightBox(cardClicked) {
    //console.log('carousel');
    document.getElementById('carousel').classList.remove('hide');  //  open liveBox en supprimant le hide
    document.querySelectorAll('[data-media-lightbox]').forEach((element) => {
        element.classList.add('hide') // on cache les autre images du carousel avec hide
    })
    let id = cardClicked.dataset['media'];    // On trouve la data-media qui identifie la media
    document.querySelector('[data-media-lightbox="' + id + '"]').classList.remove('hide');// on l'affiche en suppr le hide

}

function closeLightBox(){
    document.getElementById('carousel').classList.add('hide');// ajout hide pour close carousel
}

function nextSlide(){
 
}
function previousSlide(){
    // affiche la suivante uniquement
}

l'ouvrir, la fermer, afficher la 1ere media OK avec le code ci-dessus ca fonctionne mais je n'arrive pas :( à faire les defilements des autres)

dans un second fichier js j'ai tous mes evenements :

function dispatchEvent(medias) {
    eventMediaSort(medias);
    eventLightBox();
    eventHeart(medias);

    function eventMediaSort(medias) {
        // 
        document.getElementById("sort-choice").addEventListener("change", function (event) {//on chang les données triees
            let type = document.querySelector("#sort-choice").value;
            sortMediasByType(medias, type)//on trie par type
            displayMedias(medias); //on relance les medias
            displayLightBox(medias); // on lance les medias pour la lightbox
        });
    }

    function eventLightBox(){
        document.querySelector('.gallery-section').addEventListener("click", function (event) {
            const target = event.target;
            if (target.classList.contains('media')) {// si contient media
                openLightBox(target);// ouverture de la lightbox
            }
        });
        document.getElementById('lightboxClose').addEventListener("click", closeLightBox)
    }
   
    // evenement de la modal de contact
    const mdContainer = document.querySelector(".md-container");
    const modalTriggers = document.querySelectorAll(".modal-trigger");
    modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))

    function toggleModal(){
        mdContainer.classList.toggle("active")
    }

    //au clic sur le coeur
    function eventHeart(){
        document.querySelector('.fa-heart').addEventListener("click",
            countClics)
    }
}

et enfin, mes elements DOM dans un fichier à part : (factory)

function headerFactory(photograph) {
  const { name, portrait, city, tagline, id } = photograph;

  const image = `assets/photographers/${portrait}`;

  function getHeaderCardDOM(){
    const linkURL = "photographer.html";
    const url = `${linkURL}?photographer=${id}`;
    return ` 
    <article>
      <div class="profil">
        <h1>${name}</h1>
        <p class="where">${city}</p>
        <p class="tagline">${tagline}</p>
      </div> 
        <button class="modal-btn modal-trigger" id="modal">Contactez moi</button>
      <div>
        <a href=${url}><img src=${image} alt="photo"></ a>
    </div>
    </article>`;
  }
  
  return { name, image, getHeaderCardDOM };
}

/****     elements DOM partie GALERIES    **********/

function galleryFactory(data) {
  const { id, image, title, video, likes, date } = data;
  const imagesMedias = typeof image !== "undefined" 
    ? `assets/thumbnails/imagesMedias/${image}`
    : `https://picsum.photos/200/300`; // a remplacer par le chemin de l'image associé a la vidéo

  const linkURL = "photographer.html";
  const url = `${linkURL}?imagesMedias=${id}`;
  return ` 
    <article>  
      <div class ="gallery-section">
        <figure>
          <img src=${imagesMedias} alt="pictures" tabindex="0" class="media" data-media="${id}">
          <figcaption>
          <p class="infoMedia"> ${title}</p>
          <span class="numberLike" id="clicHeart">${likes}</span><i class="fa fa-solid fa-heart"></i>
         </figcaption>
        </figure>
      </div>
    </article>`;
}

/****************************************************************************/

function displayDataHeader(photographer) {
  const profilHeaderModel = headerFactory(photographer);
  document.querySelector(".photograph-header").innerHTML = profilHeaderModel.getHeaderCardDOM();
  document.getElementById("nameModal").innerHTML = photographer.name;
}

/*********** Affichage  des medias de l ID *******************************/
function displayMedias(medias) {
  // On recreer chaque card Html stocker dans cardsDom
  const cardsDom = medias.map((media) => {
    return galleryFactory(media);
  });

  // On ecrase la section des cards par la nouvelle
  document.querySelector(".gallery-section").innerHTML = cardsDom;
}

incappable d'arriver à mettre mes medias et les faire passer de gauche à droite :( ah oui j'allais oublier : mon html :

    <!-- CAROUSEL  LIGHTBOX    -->
  <div id="carousel" class="lightbox hide">
    <button class="lightbox__close" id="lightboxClose" aria-label="Close">Fermer</button>
    <button class="lightbox__next next" aria-label="next">Suivant</button>
    <button class="lightbox__prev previous"aria-label="previous">Précédent</button>
   
    <div class="lightbox__content"></div>

  </div>

esct ce que vous pouvez m''aider? merci bcp
Configuration: Windows / Chrome 102.0.0.0