message

assets/js/pagination.js

@@ -0,0 +1,58 @@
+
+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);
+