JavaScript My lightbox is not working

[AxSF]

Hello everyone!

I have a problem and I don’t know where it comes from :

I can open my lightbox but the navigation and the images don't work well, when I click on a image, only the first media opens (the video with the horses) and I have no error messages in the console.

Here is my GitHub Pages : https://axsf3.github.io/FishEye/photographer-page.html?id=243

Here is my lightbox folder :

export default class Lightbox {
    constructor(medias, currentMedia) {
      this.element = document.getElementById('lightbox');
      this.content = document.getElementById('lightbox-content');
      this.next = this.next.bind(this);
      this.previous = this.previous.bind(this);
      this.close = this.close.bind(this);
      this.medias = medias;
      this.currentMedia = currentMedia;
      this.createMedias();
      this.element.classList.add('open');
      this.registerEvents();
    }

    createMedias() {
    
    this.content.innerHtml = '';
      
    this.medias.forEach((media) => {
        
        const mediaDom = document.createElement('img');
        
        mediaDom.src = media.url;
        if (media.id === this.currentMedia) {
          mediaDom.classList.add('active');
          
        }
        this.content.appendChild(mediaDom);
        console.log(mediaDom)
        console.log(this.currentMedia)
        
      });
    }



    
    close() {
    
      this.element.classList.remove('open');
      this.element.querySelector('#lightbox-next').removeEventListener('click', this.next);
      this.element.querySelector('#lightbox-previous').removeEventListener('click', this.previous);
      this.element.querySelector('#lightbox-close-btn').removeEventListener('click', this.close);
      console.log('juste ici')
    }
    
    registerEvents() {
      this.element.querySelector('#lightbox-next').addEventListener('click', this.next);
      this.element.querySelector('#lightbox-previous').addEventListener('click', this.previous);
      this.element.querySelector('#lightbox-close-btn').addEventListener('click', this.close);
    }
    
    next() {
      console.log('ici')


      let currentElement = this.content.querySelector('img.active');
      currentElement.classList.remove('active');
      
      if (currentElement.nextSibling === null) {
        currentElement = this.content.querySelector('img:first-child');
        console.log(currentElement)
      } else {
        currentElement = currentElement.nextSibling;
        console.log(currentElement)
      }
      currentElement.classList.add('active');
      console.log(currentElement)

      console.log(this.content)
    }
    
    previous() {
      let currentElement = this.content.querySelector('img.active');
      currentElement.classList.remove('active');
      if (currentElement.previousSibling === null) {
        currentElement = this.content.querySelector('img:last-child');
      } else {
        currentElement = currentElement.previousSibling;
      }
      currentElement.classList.add('active');
    }
  }