Подскажите пожалуйста как настроить слайдер.подскажите почему увеличение(уменьшение) индекса работает только один раз,как сделать,что бы при нажатии правой стрелки он всегда увеличивался,а если нажать потом левую,то он перепрыгнет через кликнутое изображение и покажет через одно.Что не так в коде?
Вот мой код
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();
}
(
