Estatein Kit — Fraction Pagination JS Code

{"id":1525,"name":"estatein-fraction-pagination-js-code","title":"Estatein \u2014 Fraction Pagination JS Code","date":"2025-06-13 19:38:44","date_formatted":"June 13, 2025","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/estatein-fraction-pagination-js-code\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"hkquid","name":"code","parent":0,"children":[],"settings":{"javascriptCode":"document.addEventListener('DOMContentLoaded', function () {\n document.querySelectorAll('.splide.estatein-slider').forEach(function (slider) {\n \/\/ Find .custom-fraction in the next .estatein_mobile-and-fraction sibling\n let fractionEl = null;\n let sibling = slider.nextElementSibling;\n while (sibling) {\n if (sibling.classList.contains('estatein_mobile-and-fraction')) {\n fractionEl = sibling.querySelector('.custom-fraction');\n break;\n }\n sibling = sibling.nextElementSibling;\n }\n\n const perPageDesktop = 3;\n const perPageMobile = 1;\n let splide;\n\n const waitForSlides = setInterval(function () {\n const slides = slider.querySelectorAll('.splide__slide');\n if (slides.length > 0) {\n clearInterval(waitForSlides);\n\n splide = new Splide(slider, {\n pagination: false,\n perPage: perPageDesktop,\n perMove: 1,\n breakpoints: {\n 767: {\n perPage: perPageMobile,\n },\n },\n });\n\n function updateFraction() {\n const isMobile = window.innerWidth <= 767;\n if (isMobile) {\n \/\/ Slide-based: 02 of 08\n const current = String(splide.index + 1).padStart(2, '0');\n const total = String(splide.length).padStart(2, '0');\n if (fractionEl) {\n fractionEl.innerHTML = `${current} of ${total}`;\n }\n } else {\n \/\/ Page-based: 01 of 03\n const perPage = splide.options.perPage;\n const page = Math.round(splide.index \/ perPage) + 1;\n const totalPages = Math.ceil(splide.length \/ perPage);\n const current = String(page).padStart(2, '0');\n const totalStr = String(totalPages).padStart(2, '0');\n if (fractionEl) {\n fractionEl.innerHTML = `${current} of ${totalStr}`;\n }\n }\n }\n\n splide.on('mounted move', updateFraction);\n window.addEventListener('resize', updateFraction);\n\n splide.mount();\n }\n }, 50);\n });\n});","executeCode":true,"user_id":1,"time":1749797943,"code":" ","cssCode":"span.fraction-current {\n color: white;\n}"},"themeStyles":[]}],"templateType":"section"}