Переключение изображений внутри модального окна

Question

У меня есть список изображений. При клике на элемент списка, появляется изображение в модальном окне. В модальном окне есть элементы prev и next для переключения изображений. Я пока не могу представить как реализовать работу переключения изображений при клике на next или prev. nextSibling и previousSibling не подойдут, т.к соседних элементов нет.

function showModalWindow() {
  // document.addEventListener('click',e => console.log(e.target))
  const modal = document.querySelector('#images-popup');

  if (modal.classList.contains('hide__modal__window')) {
    modal.classList.remove('hide__modal__window');
    modal.classList.add('show__modal__window');
  } else {
    modal.classList.add('hide__modal__window');
    modal.classList.remove('show__modal__window');
  }

  if (modal.classList.contains('show__modal__window')) {
    body.classList.add('body__no-scroll');
    body.classList.remove('body__scroll');
  } else {
    body.classList.remove('body__no-scroll');
    body.classList.add('body__scroll');
  }
}


const popupBlock = document.querySelector('.images-popup-cont__block');
window.addEventListener('click', function(event) {
  // Проверяю, что клик был совершён по картинке
  if (event.target.hasAttribute('src')) {

    // Находим изображение, на которое произвели клик
    const imageFinal = event.target.closest('.images-container__item');
    const imageInfo = {
      imgSrc: imageFinal.querySelector('.images-container-item__img').getAttribute('src'),
      altClass: imageFinal.querySelector('.images-container-item__img').getAttribute('alt'),
      title: imageFinal.querySelector('.images-container-item__caption').innerText,
    }
    const imagePopupHTML = `<div class="popup-cont-block__content">
                                    <img src="${imageInfo.imgSrc}" alt="${imageInfo.altClass}" class="images-container-item__img">
                                    <div class="images-container-item__caption-inner">${imageInfo.title}</div>
                                    <div class="images-popup-content__arrows">
                                        <div class="images-popup-arrow__prev"><i class="fa-solid fa-chevron-left"></i></div>
                                        <div class="images-popup-arrow__next"><i class="fa-solid fa-chevron-right"></i></div>
                                    </div>
                                </div>`;
    popupBlock.insertAdjacentHTML('beforeend', imagePopupHTML);

    const modalClose = document.querySelector('.images__popup__close');
    modalClose.addEventListener('click', function() {
      popupBlock.innerHTML = "";
    })
    showModalWindow();

    const popupArrowNext = document.querySelector('.images-popup-arrow__next');
    popupArrowNext.addEventListener('click', function() {
      console.log('Произошло переключение следующей картинки');
    });
  }
});

.images__wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px 0;
  text-align: center;
}

.images-actions {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
  margin-bottom: 20px;
}

.images-actions__item {
  color: #641ec5;
  opacity: .7;
  transition: .3s;
}

.images-actions__item:hover {
  opacity: 1;
  transition: .3s;
  cursor: pointer;
}

.images__container {
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.images-container__item {
  width: 350px;
  height: 250px;
  margin: 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eee;
  cursor: default;
  overflow: hidden;
  position: relative;
}

.images-container__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  transition: .2s;
}

.images-container__item img:hover {
  transform: scale(1.1);
  transition: .2s linear;
}

.images-container__item:hover {
  cursor: pointer;
}

.images-container__item:hover>.images-container-item__caption {
  transition: .3s linear;
  opacity: 1;
}

.images-container-item__caption {
  position: absolute;
  bottom: 0px;
  pointer-events: none;
  opacity: 0;
  background-color: #641ec5;
  width: 100%;
}

.images__popup {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.show__modal__window {
  display: block;
}

.hide__modal__window {
  display: none;
}

.images__popup__close {
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  color: #eee;
  position: absolute;
  text-align: right;
  opacity: 0.7;
  padding: 0;
  margin: 0;
  font-size: 30px;
  top: 0px;
  right: 0px;
  cursor: pointer;
  transition: .3s;
}

.images__popup__close:hover {
  opacity: 0.1;
  transition: .3s linear;
}

.images-popup-content__arrows {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  padding-bottom: 24px;
}

.images-popup-arrow__prev,
.images-popup-arrow__next {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 40px;
  color: #641ec5;
  opacity: 0.4;
  transition: .2s;
}

.images-popup-arrow__prev:hover,
.images-popup-arrow__next:hover {
  opacity: 1;
  cursor: pointer;
  transition: .2s;
}

.images-popup-arrow__next {
  justify-content: flex-end;
}

..images-popup-arrow__prev {
  justify-content: flex-start;
}

.images__popup__container {
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}

.images-popup-cont__block {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.popup-cont-block__content {
  overflow: hidden;
  position: relative;
}

.images-container-item__caption-inner {
  text-align: center;
  color: #fff;
  cursor: default;
}

.images-container-item__caption-inner:hover {
  color: #641ec5;
  transition: .2s;
}

<div class="images__wrapper">
  <div class="images__container">
    <div class="images-container__item">
      <img src="img/dormitory/hall.jpeg" class="images-container-item__img" alt="Коридор">
      <div class="images-container-item__caption">Выход</div>
    </div>
    <div class="images-container__item">
      <img src="img/dormitory/rocking-chair.jpeg" class="images-container-item__img" alt="Тренажёрный зал">
      <div class="images-container-item__caption">Тренажёрный зал</div>
    </div>
    <div class="images-container__item">
      <img src="img/dormitory/gym.jpeg" class="images-container-item__img" alt="Шейпинг зал">
      <div class="images-container-item__caption">Шейпинг зал</div>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Переключение изображений внутри модального окна

Ответы (0 шт):