Слайдер модального Окна
 

Подскажите пожалуйста как настроить слайдер.подскажите почему увеличение(уменьшение) индекса работает только один раз,как сделать,что бы при нажатии правой стрелки он всегда увеличивался,а если нажать потом левую,то он перепрыгнет через кликнутое изображение и покажет через одно.Что не так в коде?
Вот мой код

import gallery from "./gallery-items.js";

const ul = document.querySelector(".js-gallery");
const lightBox = document.querySelector(".js-lightbox");
const imgLightBox = document.querySelector("img.lightbox__image");
const closeModalBtn = document.querySelector(
  'button[data-action="close-lightbox"]'
);

closeModalBtn.addEventListener("click", closeModal);
ul.addEventListener("click", openModal);

function buildGalleryItem({ preview, description, original }) {
  return `<li class="gallery__item">
      <a
        class="gallery__link"
        href=${preview}
      >
        <img
          class="gallery__image"
          src=${preview}
          data-source="${original}"
          alt=${description}
        />
      </a>
    </li>`;
}

function createGalleryList(data) {
  data.forEach((el) => {
    ul.insertAdjacentHTML("beforeend", buildGalleryItem(el));
  });
}

createGalleryList(gallery);

function closeModal() {
  lightBox.classList.remove("is-open");
  imgLightBox.src = "";
}

function openModal(e) {
  e.preventDefault();
  lightBox.classList.add("is-open");
  const img = e.target;
  const src = img.dataset.source;

  imgLightBox.src = src;

  window.addEventListener("keydown", handlePress);

  lightBox.addEventListener("click", handleClick);
}
function handleClick(e) {
  if (e.target === imgLightBox) {
    return;
  }
  closeModal();
}

function handlePress(e) {
const link = e.target.href;
const currentImage = gallery.find((item) => item.preview === link);
let index = gallery.indexOf(currentImage);

function ArrowLeft() {
index--;
index < 0 && (index = gallery.length - 1);

show(index);
}

function ArrowRight() {
index++;
index >= gallery.length && (index = 0);

show(index);
}

function show(i) {
imgLightBox.src = gallery[i].original;
}

if (e.code === "ArrowLeft") {
ArrowLeft();
}

if (e.code === "ArrowRight") {
ArrowRight();
}

if (e.code !== "Escape") {
return;
}
closeModal();

}

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Так вы берёте текущий индекс картинки и прибавляете или вычитаете 1, а изменённое число нигде не хранится.

И кстати, при закрытии изображения следует отменить обработчик события нажатия клавиш.

https://codesandbox.io/s/mystifying-...=/src/index.js

Спасибо,я бы сам не додумался:((