Проблема с добавлением класса следующему элементу nodelist

Делаю галерею в модальном окне, наподобие fancybox только на чистом js, и возникла ошибка "Cannot read property 'classList' of undefined" при задавании класса следующему элементу, как можно это исправить? У меня такое ощущение что я изначально что-то делал неправильно...

HTML
<div class="card-page__imgs">
   <img id="1" href="assets/img/card-page-main-img.png" class="card-page__main-img gallery-img" 
   src="assets/img/card-page-main-img.png" alt="Изображение">
   <div class="card-page__img-group">
      <img id="2" src="assets/img/card-page-img1.png" class="card-page__second-img gallery-img next-img">
      <img id="3" src="assets/img/card-page-img2.png" class="card-page__second-img gallery-img">
      <img id="4" src="assets/img/card-page-img3.png" class="card-page__second-img gallery-img">
   </div>
</div>

JS
const galleryBtnPrev = document.querySelector('.gallery__btn_prev'),
    galleryBtnNext = document.querySelector('.gallery__btn_next'),
    galleryMainImg = document.querySelector('.gallery__main-img'),
    galleryImages = document.querySelectorAll('.gallery-img');
const showNext = () => {
    const galleryImagesArr = Array.from(galleryImages);
    galleryImagesArr.forEach((el, i) => {
        const nextSrc = el.getAttribute('src');
        if(el.classList.contains('next-img')) {
            galleryMainImg.setAttribute('src', nextSrc);
            el.classList.remove('next-img');
            const nextElem =el.nextElementSibling;
            nextElem.classList.add('next-img');
        }
    });
};
// galleryBtnPrev.addEventListener('click', showPrev);
galleryBtnNext.addEventListener('click', showNext);