Buy me a coffee

Carousel Image Block V2 – Counter (Gallery View)

<!-- 
- Counter Number - Carousel Image Block v2 
- Email me: [email protected]
-->
<script>
!function(){function e(){document.querySelectorAll(".markdown-block").forEach((e=>{const t=e.querySelector(".tp-swiper-container");if(!t)return;if(e.querySelector(".tp-carousel-counter"))return;const n=t.querySelectorAll(".swiper-slide").length,o=document.createElement("div");o.className="tp-carousel-counter",o.textContent=`1/${n}`;e.querySelector(".tp-swiper-wrapper").appendChild(o);const i=window.MarkdownCarousel.swiperInstances.find((e=>e.el===t));i&&i.on("slideChange",(function(){o.textContent=`${this.activeIndex+1}/${n}`}))}))}if(window.TPLightbox){const e=window.TPLightbox.navigate,t=window.TPLightbox.open;window.TPLightbox.open=function(e,n,o){t.call(this,e,n,o),setTimeout((()=>{const e=document.getElementById("tp-lightbox");if(!e)return;let t=e.querySelector(".tp-lightbox-counter");t||(t=document.createElement("div"),t.className="tp-lightbox-counter",e.querySelector(".tp-lightbox-container").appendChild(t)),t.textContent=`${this.currentIndex+1}/${this.images.length}`}),50)},window.TPLightbox.navigate=function(t){e.call(this,t),setTimeout((()=>{const e=document.querySelector(".tp-lightbox-counter");e&&(e.textContent=`${this.currentIndex+1}/${this.images.length}`)}),50)}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{setTimeout(e,500)})):setTimeout(e,500),window.addEventListener("mercury:load",(()=>{setTimeout(e,500)}))}();
</script>
<style>
.tp-carousel-counter {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    background: #000 !important;
    color: #fff;
    display: block;
    line-height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}
.tp-lightbox-counter {
    position: absolute;
    bottom: -25px;
}
</style>

Screenshot

Screenshot