Description
- custom carousel, use Team List Section
- counter number/arrow
- infinite scroll
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First you need to add a Team (list) section (section with (i) icon)
Make sure you choose Carousel layout
#1.2. Edit Carousel section > Upload your desired images
#1.3. Hover on Section > Click Edit Section > at Anchor Link, enter word: link-slide
#1.4. Hover on page where you use List Section > Click Gear icon
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"] .user-items-list-carousel{display:none!important}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:#fff0;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 e={SECTION_SELECTOR:'section[id*="link-slide"]',SPEED:500,OPEN_IN_NEW_TAB:!0};function t(e,t,n){if(!e)return n;const i=getComputedStyle(e).getPropertyValue(t),s=parseFloat(String(i||"").trim());return Number.isFinite(s)?s:n}function n(){document.querySelectorAll(e.SECTION_SELECTOR).forEach((n=>{const i=n.querySelector(".user-items-list-carousel");i&&function(n,i){if("1"===n.dataset.tpLinkSlideBuilt)return!1;const s=function(e){const t=e.querySelectorAll(".user-items-list-carousel__slide"),n=[];return t.forEach((e=>{const t=e.querySelector(".user-items-list-carousel__media"),i=e.querySelector("a");if(t){const e=t.getAttribute("src")||t.getAttribute("data-src")||t.getAttribute("data-image")||"",s=i?i.getAttribute("href"):"";e&&n.push({src:e,href:s})}})),n}(i);if(!s.length)return!1;if(!window.Swiper)return!1;const l=t(n,"--desktop-columns",3),r=t(n,"--mobile-columns",1),o=t(n,"--tp-ls-gap-desktop",20),a=t(n,"--tp-ls-gap-mobile",10),c=document.createElement("div");c.className="tp-link-slide";const d=e.OPEN_IN_NEW_TAB?' target="_blank" rel="noopener"':"";function u(e){const t=c.querySelector(".tp-link-slide__current");if(!t)return;const n=window.innerWidth<768?r:l;let i=e.realIndex+Math.floor(n/2);i%=s.length,t.textContent=i+1}c.innerHTML=`\n <div class="swiper tp-link-slide__swiper">\n <div class="swiper-wrapper">\n ${s.map((e=>`\n <div class="swiper-slide">\n <a class="tp-link-slide__a" href="${e.href||"#"}"${e.href?d:""}>\n <img class="tp-link-slide__img" src="${e.src}" alt="">\n <span class="tp-link-slide__ov" aria-hidden="true"></span>\n </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">${s.length}</span>\n </span>\n <button class="tp-link-slide__nav tp-link-slide__next" aria-label="Next">→</button>\n </div>\n `,i.parentNode.insertBefore(c,i),new Swiper(c.querySelector(".tp-link-slide__swiper"),{speed:e.SPEED,loop:!0,slidesPerView:r,spaceBetween:a,centeredSlides:!1,navigation:{nextEl:c.querySelector(".tp-link-slide__next"),prevEl:c.querySelector(".tp-link-slide__prev")},breakpoints:{768:{slidesPerView:l,spaceBetween:o}},on:{init:function(){u(this)},slideChange:function(){u(this)},resize:function(){u(this)}}}),n.dataset.tpLinkSlideBuilt="1"}(n,i)}))}function i(){n();new MutationObserver((()=>n())).observe(document.documentElement,{subtree:!0,childList:!0});let e=0;const t=setInterval((()=>{n(),e++,e>60&&clearInterval(t)}),250)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",i):i()}();
</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>