Description
- Gallery Block Custom Carousel
- Counter Number/Arrow
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First you need to add Gallery Block
Choose Grid layout
Upload your desired images
#1.2. Hover on top right of section > Click Edit Section
at Anchor Link, enter word: link-slide
#1.3. Hover on page where you added Gallery Block
Click Advanced > Paste this code
<style>
section[id*="link-slide"]{
--tp-ls-overlay:transparent;
--tp-ls-nav-color:#000;
--tp-ls-gap-desktop:20px;
--tp-ls-gap-mobile:10px;
--desktop-columns:3;
--mobile-columns:1;
}
section[id*="link-slide"] .tp-link-slide{width:100%;max-width:100%;margin:0}
section[id*="link-slide"] .tp-link-slide .swiper{width:100%;position:relative;overflow:hidden;border-radius:var(--tp-ls-radius,0)}
section[id*="link-slide"] .tp-link-slide .swiper-slide{height:auto}
section[id*="link-slide"] .tp-link-slide__a{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#f3f3f3;text-decoration:none}
section[id*="link-slide"] .tp-link-slide__img{width:100%;height:100%;display:block;aspect-ratio:1/1;object-fit:cover}
section[id*="link-slide"] .tp-link-slide__ov{position:absolute;inset:0;background:var(--tp-ls-overlay);opacity:0;transition:opacity .18s ease;pointer-events:none}
@media (hover:hover){section[id*="link-slide"] .tp-link-slide__a:hover .tp-link-slide__ov{opacity:1}}
section[id*="link-slide"] .tp-link-slide__controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px}
section[id*="link-slide"] .tp-link-slide__counter{color:var(--tp-ls-nav-color);font-size:16px;font-weight:500;user-select:none}
section[id*="link-slide"] .tp-link-slide__nav{background:none;border:none;color:var(--tp-ls-nav-color);cursor:pointer;font-size:24px;padding:8px;line-height:1;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
section[id*="link-slide"] .tp-link-slide__nav:hover{opacity:.6}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
!function(){const t={SECTION_SELECTOR:'section[id*="link-slide"]',SPEED:500,OPEN_IN_NEW_TAB:!0,DISABLE_LINKS:!0};function e(t,e,n){if(!t)return n;const i=getComputedStyle(t).getPropertyValue(e),r=parseFloat(String(i||"").trim());return Number.isFinite(r)?r:n}function n(t){const e=String(t||"").match(/https?:\/\/[^\s"'<>)]+/i);return e?e[0]:""}function i(i){if(!i||"1"===i.dataset.tpLinkSlideBuilt)return!1;const r=i.closest(t.SECTION_SELECTOR);if(!r)return!1;const s=i.querySelector(".sqs-gallery-container");if(!s)return!1;const l=[...s.querySelectorAll("a.image-slide-anchor")];if(!l.length)return!1;const a=l.map((t=>{const e=t.getAttribute("href")||"",i=function(t){const e=t.querySelector("img");return e&&(e.getAttribute("data-image")||e.getAttribute("data-src")||e.getAttribute("src"))||""}(t);if(!i)return null;const r=function(t,e){const i=t.getAttribute("href");if(i&&i!==e&&!/^#/.test(i))return i;const r=["data-clickthrough-url","data-clickthrough","data-clickthroughUrl","data-url","data-link","data-href"];for(const e of r){const n=t.getAttribute(e);if(n&&(/^https?:\/\//i.test(n)||n.startsWith("/")))return n}const s=n(t.getAttribute("data-description")||t.dataset.description||"");if(s)return s;const l=n(t.getAttribute("data-title")||t.dataset.title||"");return l||""}(t,i)||e||"#";return{src:i,clickUrl:r}})).filter((t=>t&&t.src));if(!a.length)return!1;if(!window.Swiper)return!1;const o=e(r,"--desktop-columns",3),c=e(r,"--mobile-columns",1),d=e(r,"--tp-ls-gap-desktop",20),u=e(r,"--tp-ls-gap-mobile",10),p=document.createElement("div");p.className="tp-link-slide",p.setAttribute("data-tp-from-block",i.id||"");const _=t.OPEN_IN_NEW_TAB?' target="_blank" rel="noopener"':"";function f(t){const e=p.querySelector(".tp-link-slide__current");if(!e)return;const n=window.innerWidth<768?c:o;let i=t.realIndex+Math.floor(n/2);i%=a.length,e.textContent=i+1}p.innerHTML=`\n <div class="swiper tp-link-slide__swiper">\n <div class="swiper-wrapper">\n ${a.map((e=>`\n <div class="swiper-slide">\n <${t.DISABLE_LINKS||"#"===e.clickUrl?'div':'a'} class="tp-link-slide__a${t.DISABLE_LINKS||"#"===e.clickUrl?' tp-link-disabled':''}" ${t.DISABLE_LINKS||"#"===e.clickUrl?'':'href="'+e.clickUrl+'"'+_}>\n <img class="tp-link-slide__img" src="${e.src}" alt="">\n <span class="tp-link-slide__ov" aria-hidden="true"></span>\n </${t.DISABLE_LINKS||"#"===e.clickUrl?'div':'a'}>\n </div>\n `)).join("")}\n </div>\n </div>\n <div class="tp-link-slide__controls">\n <button class="tp-link-slide__nav tp-link-slide__prev" aria-label="Previous">←</button>\n <span class="tp-link-slide__counter">\n <span class="tp-link-slide__current">1</span> / <span class="tp-link-slide__total">${a.length}</span>\n </span>\n <button class="tp-link-slide__nav tp-link-slide__next" aria-label="Next">→</button>\n </div>\n `,s.parentNode.insertBefore(p,s),s.style.display="none";new Swiper(p.querySelector(".tp-link-slide__swiper"),{speed:t.SPEED,loop:!0,slidesPerView:c,spaceBetween:u,navigation:{nextEl:p.querySelector(".tp-link-slide__next"),prevEl:p.querySelector(".tp-link-slide__prev")},breakpoints:{768:{slidesPerView:o,spaceBetween:d}},on:{init:function(){f(this)},slideChange:function(){f(this)},resize:function(){f(this)}}});return i.dataset.tpLinkSlideBuilt="1",!0}function r(){let e=!1;return document.querySelectorAll(t.SECTION_SELECTOR).forEach((t=>{t.querySelectorAll('[id^="block-"]').forEach((t=>{i(t)&&(e=!0)}))})),e}function s(){r();new MutationObserver((()=>r())).observe(document.documentElement,{subtree:!0,childList:!0});let t=0;const e=setInterval((()=>{r(),t++,t>60&&clearInterval(e)}),250)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",s):s()}();
</script>
#2. Customize
#2.1. To change gap between images, change these lines
--tp-ls-gap-desktop:20px; --tp-ls-gap-mobile:10px;
#2.2. To adjust number of columns on desktop/mobile, change these.
--desktop-columns:3; --mobile-columns:1;
#2.3. To move arrows to side of images, like this
Use this code under main code
<style>
button.tp-link-slide__nav.tp-link-slide__prev {
left: 10px;
}
button.tp-link-slide__nav.tp-link-slide__next {
right: 10px;
}
button.tp-link-slide__nav {
position: absolute;
top: 50%;
z-index: 9999;
background-color: #fff !important;
border-radius: 50%;
padding: unset !important;
width: 40px !important;
height: 40px !important;
line-height: 40px;
}
</style>