Autoscroll Carousel with different width

Description

• auto scroll carousel
• users can click image to open new page
• users can drag to slide image
• hover image – show text
• different width – same height
• or different height
• view demo – password: abc
• buy me a coffee

#1. Install Code

First you need to add a Gallery Section (Image Section)

Next, choose Grid: Simple + enable Captions

Next, hover on top right of Gallery > Click Edit Gallery

Upload your desired images/text/url

Next, hover on top right of Gallery > Click Edit Section

At Anchor Links, enter word: drag-slider

Next, hover on page where you use Gallery > Click Gear icon

Click Advanced > Paste this code

<style>
  section[id*="drag-slider"] {
    --slider-max-height: 300px;
    --slider-max-height-mobile: 240px;
    --slider-text-color: #fff;
    --slider-text-size: 18px;
    --slider-img-gap: 14px;
    --slider-img-gap-mobile: 10px;
}
  section[id*="drag-slider"] .tp-marquee{width:100%;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
  section[id*="drag-slider"] .tp-marquee.tp-dragging{cursor:grabbing}
  section[id*="drag-slider"] .tp-track{display:flex;gap:var(--slider-img-gap);align-items:center;will-change:transform;transform:translate3d(0,0,0)}
  section[id*="drag-slider"] .tp-card{flex:0 0 auto;display:block;position:relative;text-decoration:none}
  section[id*="drag-slider"] .tp-img{display:block;height:auto;max-height:var(--slider-max-height);width:auto;object-fit:contain;transition:opacity .3s ease}
  section[id*="drag-slider"] .tp-card:hover .tp-img{opacity:.65}
  section[id*="drag-slider"] .tp-caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none;padding:20px}
  section[id*="drag-slider"] .tp-card:hover .tp-caption{opacity:1}
  section[id*="drag-slider"] .tp-caption-text{color:var(--slider-text-color);font-size:var(--slider-text-size);text-align:center;max-width:100%;word-wrap:break-word}
  section[id*="drag-slider"] .tp-hide-gallery{display:none!important}
  @media (max-width: 767px){
    section[id*="drag-slider"] .tp-img{max-height:var(--slider-max-height-mobile);}
    section[id*="drag-slider"] .tp-track{gap:var(--slider-img-gap-mobile);}
  }
</style>
<script>
(()=>{const e='section[id*="drag-slider"]';function t(e){if(!e||"1"===e.dataset.tpDragDone)return;const t=e.querySelector(".gallery-grid");if(!t)return;const n=[...t.querySelectorAll("figure.gallery-grid-item")];if(!n.length)return;const r=n.map((e=>{const t=e.querySelector("img"),n=e.querySelector(".gallery-caption-content"),r=function(e){return e&&(e.getAttribute("data-src")||e.getAttribute("data-image")||e.getAttribute("src"))||""}(t);return{url:r,title:n&&(n.textContent||"").trim()||t&&(t.getAttribute("alt")||"").trim()||"",link:t&&t.closest&&t.closest("a")?t.closest("a").href:""}})).filter((e=>e.url));if(!r.length)return;e.dataset.tpDragDone="1";const l=e.querySelector(".gallery")||t;l&&l.classList.add("tp-hide-gallery");const o=function(e,t){const n=e.querySelector(".tp-marquee");n&&n.remove();const r=document.createElement("div");r.className="tp-marquee",r.setAttribute("aria-label","Autoscrolling images");const l=document.createElement("div");function o(){const e=document.createDocumentFragment();t.forEach(((t,n)=>{const r=document.createElement("a");r.className="tp-card",r.href=t.link||t.url,r.target="_blank",r.rel="noopener noreferrer",r.dataset.index=String(n);const l=document.createElement("img");l.className="tp-img",l.loading="lazy",l.decoding="async",l.alt=t.title||"",l.src=t.url;const o=document.createElement("div");o.className="tp-caption";const a=document.createElement("span");a.className="tp-caption-text",a.textContent=t.title||"",o.appendChild(a),r.appendChild(l),r.appendChild(o),e.appendChild(r)})),l.appendChild(e)}l.className="tp-track",l.id="tpTrack",r.appendChild(l),o(),o();const a=e.querySelector(".gallery")||e.querySelector(".gallery-grid")||null;return a&&a.parentElement?a.parentElement.insertBefore(r,a):e.insertBefore(r,e.firstChild),r}(e,r);!function(e){const t=e.querySelector(".tp-track");if(!t)return;let n=0;new ResizeObserver((()=>{n=t.scrollWidth/2})).observe(t);let r=0,l=!1;function o(){n&&(e.scrollLeft>=n&&(e.scrollLeft-=n),e.scrollLeft<0&&(e.scrollLeft+=n))}e.scrollLeft=1,r=requestAnimationFrame((function t(){l||(e.scrollLeft+=.65,o()),r=requestAnimationFrame(t)}));let a=!1,i=0,c=0,s=!1,u=null,d=0,p=0;function m(t){if(!a)return;if(a=!1,e.classList.remove("tp-dragging"),e.releasePointerCapture&&null!=t.pointerId)try{e.releasePointerCapture(t.pointerId)}catch(e){}const n=document.elementFromPoint(t.clientX,t.clientY),r=n&&n.closest?n.closest(".tp-card"):null,o=r?r.dataset.index:null,i=!s&&null!=u&&o===u;u=null,setTimeout((()=>l=!1),60),i&&r&&(t.preventDefault(),window.open(r.href,"_blank","noopener,noreferrer"))}e.addEventListener("pointerdown",(function(t){if(void 0!==t.button&&0!==t.button)return;a=!0,s=!1,l=!0,e.classList.add("tp-dragging"),d=t.clientX,p=t.clientY,i=t.clientX,c=e.scrollLeft;const n=t.target&&t.target.closest?t.target.closest(".tp-card"):null;u=n?n.dataset.index:null,e.setPointerCapture&&null!=t.pointerId&&e.setPointerCapture(t.pointerId),t.preventDefault()}),{passive:!1}),window.addEventListener("pointermove",(function(t){if(!a)return;const n=t.clientX-i;(Math.abs(t.clientX-d)>4||Math.abs(t.clientY-p)>4)&&(s=!0),e.scrollLeft=c-n,o(),t.preventDefault()}),{passive:!1}),window.addEventListener("pointerup",m,{passive:!1}),window.addEventListener("pointercancel",m,{passive:!0}),e.addEventListener("dragstart",(e=>e.preventDefault()))}(o)}function n(){document.querySelectorAll(e).forEach(t)}function r(){n();new MutationObserver((()=>n())).observe(document.documentElement,{childList:!0,subtree:!0}),setTimeout(n,600),setTimeout(n,1600),setTimeout(n,3e3)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r,{once:!0}):r()})();
</script>

#2. Customize

All style options here: Line 02 to Line 09

#2.1. To set different height, like this

You can use this code to Custom CSS

section[id*="drag-slider"] .tp-img {
    --slider-max-height: 100% !important;
    max-width: 300px !important;
}
@media screen and (max-width:767px) {
    section[id*="drag-slider"] .tp-img {
        max-width: 150px !important;
    }
}

#2.2. To change caption text style, use this to Custom CSS

div.tp-caption * {
    color: #000 !important;
    font-size: 20px !important;
    font-family: monospace;
}