Проблема с nextElementSibling при разработке галереи

Делаю галерею, при нажатии на один из картинок появляется модалка с фулскрином этого изображения, наподобие fancybox, и возникла ошибка с nextElementSibling. Проблема в том что при верстке не все элементы стоят друг за другом, структура верстки ниже, из вариантов остается менять верстку, но тогда все будет работать криво и куча другой мороки, или же поменять js, была идея сделать из нод листа массив и уже работать с ним, но на реализации ничего хорошего не вышло. Как можно это пофиксить не влезая в верстку?

HTML, то по чем нажимают
<div class="card-page__imgs">
   <img class="card-page__main-img gallery-img" src="assets/img/card-page-main-img.png">
   <div class="card-page__img-group">
        <img src="assets/img/card-page-img1.png" class="card-page__second-img gallery-img">
        <img src="assets/img/card-page-img2.png" class="card-page__second-img gallery-img">
        <img src="assets/img/card-page-img3.png" class="card-page__second-img gallery-img">
   </div>
</div>

HTML, модалка которая открывается 
<div class="gallery">
  <div class="gallery__wrapper">
     <div class="gallery__content">
         <button class="gallery__btn gallery__btn_prev">
             <img class="gallery__btn__img gallery__btn__img_prev" src="assets/img/arrow-left-m.svg"> 
         </button>
         <div class="gallery__container-img">
              <img src="" class="gallery__main-img" alt="Изображение">
         </div>
         <button class="gallery__btn gallery__btn_next">
              <img class="gallery__btn__img gallery__btn__img_next" src="assets/img/arrow-left-m.svg">
         </button>
     </div>
  </div>
</div>

JS
const gallery = document.querySelector('.gallery'),
    galleryBtnPrev = document.querySelector('.gallery__btn_prev'),
    galleryBtnNext = document.querySelector('.gallery__btn_next'),
    galleryMainImg = document.querySelector('.gallery__main-img'),
    galleryImages = document.querySelectorAll('.gallery-img');
const showPrev = () => {
    const current = document.querySelector('.gallery-img.active-img');
    let prevElem = current.previousElementSibling;
    if (prevElem) {
        current.classList.remove('active-img');
        prevElem.classList.add('active-img');
        galleryMainImg.src = prevElem.src;
    } else if (prevElem === null) {
        prevElem = galleryImages[galleryImages.length - 1];
        galleryMainImg.src = prevElem.src;
        current.classList.remove('active-img');
        prevElem.classList.add('active-img');
        prevElem = current.previousElementSibling;
    }
};
const showNext = () => {
    const current = document.querySelector('.gallery-img.active-img');
    let nextElem = current.nextElementSibling;
    if (nextElem) {
        current.classList.remove('active-img');
        nextElem.classList.add('active-img');
        galleryMainImg.src = nextElem.src;
    } else if (nextElem === null) {
        nextElem = galleryImages[0];
        galleryMainImg.src = nextElem.src;
        current.classList.remove('active-img');
        nextElem.classList.add('active-img');
        nextElem = current.nextElementSibling;
    }
};
galleryBtnPrev.addEventListener('click', showPrev);
galleryBtnNext.addEventListener('click', showNext);
galleryImages.forEach(el => {
    el.addEventListener('click', () => {
        el.classList.add('active-img');
        const current = document.querySelector('.gallery-img.active-img');
        gallery.classList.add('active');
        galleryMainImg.src = el.src;
        console.log(el);
    })
});