Использование JavaScript для изменения SRC, чтобы избежать чрезмерного размера DOM при создании галереи [закрыто] ⇐ Php

[Anonymous]

Я подумал о создании галереи изображений, похожей на карусель, с кнопками жеста и стрелкой, которая покажет WordPress Media Gallery. Но все методы либо Div, либо Div создают чрезмерную проблему элементов DOM в маяке. Поэтому я попробовал код PHP, который отображает 3 изображения из 1 основного изображения, 2 боковых изображения, когда инициируется жест или нажатие кнопки кнопки, JavaScript изменяет SRC этих изображений на следующие 3 или предыдущие 3 изображения. Боковые изображения обрезаются и показаны по краям, чтобы пользователь знал, что есть другие изображения. код JavaScript: < /p>
document.addEventListener("DOMContentLoaded", function () {
const images = ;
let currentIndex = 0;

function updateGallery() {
document.getElementById("active-img").src = images[currentIndex];
document.getElementById("prev-img").src = images[currentIndex + 1] || "";
document.getElementById("next-img").src = images[currentIndex - 1] || "";

// Hide previous/next images if not available
document.getElementById("prev-img-container").style.display = images[currentIndex + 1] ? "block" : "none";
document.getElementById("next-img-container").style.display = images[currentIndex - 1] ? "block" : "none";
}

document.getElementById("prev-btn").addEventListener("click", function () {
if (currentIndex < images.length - 1) {
currentIndex++;
updateGallery();
}
});

document.getElementById("next-btn").addEventListener("click", function () {
if (currentIndex > 0) {
currentIndex--;
updateGallery();
}
});

updateGallery();
});
< /code>
Это HTML -код: < /p>

‹


[img]

Подробнее здесь: https://stackoverflow.com/questions/794 ... ng-gallery