59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
|
|
const itemsPerPage = 3;
|
|
const items = document.querySelectorAll(".gallery-item");
|
|
const pagination = document.getElementById("pagination");
|
|
const totalPages = Math.ceil(items.length / itemsPerPage);
|
|
let currentPage = 1;
|
|
|
|
function showPage(page) {
|
|
if (page < 1 || page > totalPages) return;
|
|
currentPage = page;
|
|
|
|
items.forEach((item, index) => {
|
|
item.style.display =
|
|
index >= (page - 1) * itemsPerPage &&
|
|
index < page * itemsPerPage
|
|
? ""
|
|
: "none";
|
|
});
|
|
|
|
renderPagination();
|
|
}
|
|
|
|
function renderPagination() {
|
|
pagination.innerHTML = "";
|
|
|
|
function createItem(label, page, active = false, disabled = false) {
|
|
const li = document.createElement("li");
|
|
if (active) li.classList.add("active");
|
|
if (disabled) li.classList.add("disabled");
|
|
|
|
const a = document.createElement("a");
|
|
a.href = "#";
|
|
a.textContent = label;
|
|
|
|
a.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
if (!disabled) showPage(page);
|
|
});
|
|
|
|
li.appendChild(a);
|
|
pagination.appendChild(li);
|
|
}
|
|
|
|
// Prev
|
|
createItem("Prev", currentPage - 1, false, currentPage === 1);
|
|
|
|
// Page numbers
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
createItem(i, i, i === currentPage);
|
|
}
|
|
|
|
// Next
|
|
createItem("Next", currentPage + 1, false, currentPage === totalPages);
|
|
}
|
|
|
|
// Init
|
|
showPage(1);
|
|
|