Audio Horizontal Slideshow

Description

• View Demo – Password: abc

#1. Install Code

#1.1. First, you need to add a Team Section (section with (i) icon)

Make sure enable these.

Make sure you choose Simple List

At tab Content, add your desired text/image

Upload Image, Title text

Next, enter your description

Next, enter your button text/url

To add audio, you can enter symbol ##, then under it, paste your audio url (use mp3 format), something like this

#1.2. Next, hover on top right of section > Click Edit Section

Enter word: image-slider

image-slider

#1.3. Next, hover on Page where you use Team Section > Click Gear icon

Click Advanced > Paste this code

<!-- Audio Horizontal Slideshow -->
<style>
:root{
   /* Layout & Dimensions */
  --tp-slider-background:transparent;
  --tp-slider-max-width:1280px;
  --tp-slider-padding-side:56px;
  --tp-slider-stage-height:520px;
    /* Image & Content Card */
  --tp-left-image-width:58%;
  --tp-text-card-left-gap:56px;
  --tp-text-card-right-gap:36px;
  --tp-text-card-width:420px;
  --tp-text-card-padding:46px;
  --tp-text-color:#000;
    /* Right Preview Image */
  --tp-right-image-width:150px;
  --tp-right-image-height:360px;
  --tp-image-radius:6px;
    /* Navigation Dots & Rings */
  --tp-ring-size:22px;
  --tp-dot-size:6px;
  --tp-ring-stroke:2px;
  --tp-dots-gap:18px;
    /* Audio & Volume Settings */
  --tp-volume-step:.15;
  --tp-start-volume:.22;
  --tp-plus-minus-size:10px;
  --tp-plus-minus-stroke:1.1px;
  --tp-plus-minus-gap:3px;
/* Animation Effects */
  --tp-slide-duration:1400ms;
  --tp-slide-easing:cubic-bezier(.18,.9,.18,1);
  --tp-slide-shift-distance:70px;
  --tp-autoplay-fallback:6000ms;
    
   /* Desktop Specifics */
  --tp-desktop-text-audio-size:12px;
  --tp-desktop-text-audio-letter-spacing:.22em;
  --tp-desktop-edge-size:32px;
  --tp-desktop-edge-icon-size:20px;
  --tp-desktop-text-audio-gap:10px;
  --tp-desktop-plus-gap:12px;
  --tp-desktop-minus-gap:12px;
}
/* (Tablet/Small Desktop) */
@media (max-width:1100px){
  :root{
    --tp-slider-padding-side:24px;
    --tp-slider-stage-height:520px;
    --tp-left-image-width:62%;
    --tp-text-card-width:380px;
    --tp-text-card-left-gap:28px;
    --tp-text-card-right-gap:18px;
    --tp-right-image-width:130px;
    --tp-right-image-height:340px;
  }
}
/* (Mobile) */
@media (max-width:767px){
  :root{
    --tp-ring-size:50px;
    --tp-dot-size:30px;
    --tp-ring-stroke:1.8px;
    --tp-plus-minus-size:45px;
    --tp-plus-minus-stroke:5px;
    --tp-plus-minus-gap:5px;
    --tp-dots-gap:15px;
  }
}

section[id*="image-slider"]{overflow-x:hidden!important;width:100%}
section[id*="image-slider"] .tp-rrx,section[id*="image-slider"] .tp-rrx *{box-sizing:border-box}
section[id*="image-slider"] .tp-rrx{min-height:1px;display:grid;place-items:center;padding:48px 0;background:var(--tp-slider-background)}
section[id*="image-slider"] .tp-rrx__wrap{width:min(var(--tp-slider-max-width),100%);padding:0 var(--tp-slider-padding-side)}
section[id*="image-slider"] .tp-rrx__stage{height:var(--tp-slider-stage-height);display:flex;align-items:center;justify-content:center}

section[id*="image-slider"] .tp-rrx__left{width:var(--tp-left-image-width);margin-left:calc(var(--tp-slider-padding-side) * -1);padding-left:var(--tp-slider-padding-side)}
section[id*="image-slider"] .tp-rrx__right{width:var(--tp-right-image-width);height:var(--tp-right-image-height);border-radius:var(--tp-image-radius);overflow:hidden;transform:translateY(22%)}

section[id*="image-slider"] .tp-rrx__slot{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--tp-image-radius)}
section[id*="image-slider"] .tp-rrx__layer{position:absolute;inset:0;opacity:1;transform:translateX(0);will-change:transform,opacity}
section[id*="image-slider"] .tp-rrx__layer.is-next{opacity:0;transform:translateX(var(--tp-slide-shift-distance))}
section[id*="image-slider"] .tp-rrx.is-anim .tp-rrx__layer.is-curr{animation:tpRrxOut var(--tp-slide-duration) var(--tp-slide-easing) forwards}
section[id*="image-slider"] .tp-rrx.is-anim .tp-rrx__layer.is-next{animation:tpRrxIn var(--tp-slide-duration) var(--tp-slide-easing) forwards}

@keyframes tpRrxOut{to{opacity:0;transform:translateX(calc(var(--tp-slide-shift-distance)*-1))}}
@keyframes tpRrxIn{to{opacity:1;transform:translateX(0)}}

section[id*="image-slider"] .tp-rrx__imgBox{width:100%;height:var(--tp-slider-stage-height);border-radius:var(--tp-image-radius)}
section[id*="image-slider"] .tp-rrx__imgBox img{width:100%;height:100%;object-fit:cover;display:block}
section[id*="image-slider"] .tp-rrx__preview img{width:220%;height:100%;object-fit:cover;transform:translateX(-38%);opacity:.92;display:block}

section[id*="image-slider"] .tp-rrx__card{
  width:var(--tp-text-card-width);
  margin-left:var(--tp-text-card-left-gap);
  margin-right:var(--tp-text-card-right-gap);
  padding:var(--tp-text-card-padding);
  background:none;
  color:var(--tp-text-color);
  transform:translateY(-40%);
}
section[id*="image-slider"] .tp-rrx__card .tp-rrx__slot{overflow:visible!important;border-radius:0!important;height:auto!important}
section[id*="image-slider"] .tp-rrx__card .tp-rrx__layer{inset:0 auto auto 0!important;width:100%!important}

section[id*="image-slider"] .tp-rrx__title{margin:0 0 14px;font-size:18px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--tp-text-color)}
section[id*="image-slider"] .tp-rrx__desc{margin:0 0 22px;font-size:12px;line-height:1.75;opacity:.9;max-width:360px;color:var(--tp-text-color)}
section[id*="image-slider"] .tp-rrx__desc p{margin:0}

section[id*="image-slider"] .tp-rrx__cta{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--tp-text-color);
  letter-spacing:.12em;font-size:12px;font-weight:600;text-transform:uppercase;position:relative;z-index:2;
}
section[id*="image-slider"] .tp-rrx__ctaIcon{
  width:40px;height:40px;border-radius:999px;border:2px solid var(--tp-text-color);
  position:relative;display:grid;place-items:center;padding:0;line-height:1;color:transparent;
}
section[id*="image-slider"] .tp-rrx__ctaIcon::before{
  content:"+";
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--tp-text-color);
  transform:translateY(-1px);
}

section[id*="image-slider"] .tp-rrx__dots{
  margin-top:26px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--tp-dots-gap);
  flex-wrap:wrap;
  position:relative;
}

section[id*="image-slider"] .tp-rrx__dot{
  width:var(--tp-ring-size);height:var(--tp-ring-size);
  position:relative;display:grid;place-items:center;cursor:pointer;
  border:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
section[id*="image-slider"] .tp-rrx__dot i{width:var(--tp-dot-size);height:var(--tp-dot-size);border-radius:999px;background:rgba(0,0,0,.45)}
section[id*="image-slider"] .tp-rrx__dot.is-active i{background:#000}

section[id*="image-slider"] .tp-rrx__ring{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none;opacity:0}
section[id*="image-slider"] .tp-rrx__dot.is-active .tp-rrx__ring{opacity:1}
section[id*="image-slider"] .tp-rrx__ring circle{fill:none;stroke:#000;stroke-width:var(--tp-ring-stroke);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}

section[id*="image-slider"] .tp-rrx__pm{
  position:absolute;top:50%;
  width:var(--tp-plus-minus-size);height:var(--tp-plus-minus-size);
  transform:translateY(-50%);
  opacity:0;pointer-events:none;
}
section[id*="image-slider"] .tp-rrx__dot.tp-audio-on.is-active.tp-engaged .tp-rrx__pm{opacity:1;pointer-events:auto}
section[id*="image-slider"] .tp-rrx__pm.tp-plus{right:calc(100% + var(--tp-plus-minus-gap))}
section[id*="image-slider"] .tp-rrx__pm.tp-minus{left:calc(100% + var(--tp-plus-minus-gap))}
section[id*="image-slider"] .tp-rrx__pm::before,
section[id*="image-slider"] .tp-rrx__pm::after{
  content:"";
  position:absolute;left:50%;top:50%;
  border-radius:999px;background:#000;
  transform:translate(-50%,-50%);
}
section[id*="image-slider"] .tp-rrx__pm::before{width:100%;height:var(--tp-plus-minus-stroke)}
section[id*="image-slider"] .tp-rrx__pm.tp-plus::after{width:var(--tp-plus-minus-stroke);height:100%}

section[id*="image-slider"] .tp-rrx__audio{display:none}

section[id*="image-slider"] .tp-rrx__mute{
  border:0;background:transparent;color:var(--tp-text-color);
  font-size:var(--tp-desktop-text-audio-size);
  letter-spacing:var(--tp-desktop-text-audio-letter-spacing);
  text-transform:uppercase;font-weight:600;
  padding:0;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  opacity:.85;
}
section[id*="image-slider"] .tp-rrx__mute.is-muted{opacity:1}
section[id*="image-slider"] .tp-rrx__mute:hover{opacity:1}

@media (min-width:768px){
  section[id*="image-slider"] .tp-rrx__dot .tp-rrx__pm{display:none!important}
  section[id*="image-slider"] .tp-rrx__dots.tp-audiobar{
    justify-content:flex-start;
    gap:0;
    flex-wrap:nowrap;
    width:var(--tp-text-card-width);
    margin-left:calc(var(--tp-left-image-width) + var(--tp-text-card-left-gap));
    margin-right:auto;
  }
  section[id*="image-slider"] .tp-rrx__audio{
    display:block;
    font-size:var(--tp-desktop-text-audio-size);
    letter-spacing:var(--tp-desktop-text-audio-letter-spacing);
    text-transform:uppercase;font-weight:600;color:var(--tp-text-color);
    white-space:nowrap;margin-right:var(--tp-desktop-text-audio-gap);
  }
  section[id*="image-slider"] .tp-rrx__edge{
    width:var(--tp-desktop-edge-size);height:var(--tp-desktop-edge-size);
    display:grid;place-items:center;border:0;padding:0;background:transparent;color:var(--tp-text-color);cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  section[id*="image-slider"] .tp-rrx__edge span{
    display:block;line-height:1;font-family:Arial,sans-serif;font-weight:750;
    font-size:var(--tp-desktop-edge-icon-size);transform:translateY(-1px);user-select:none;
  }
  section[id*="image-slider"] .tp-rrx__edge.tp-plus{margin-right:var(--tp-desktop-plus-gap)}
  section[id*="image-slider"] .tp-rrx__edge.tp-minus{margin-left:var(--tp-desktop-minus-gap)}
  section[id*="image-slider"] .tp-rrx__dotRow{display:flex;align-items:center;justify-content:flex-start;gap:var(--tp-dots-gap)}
  section[id*="image-slider"] .tp-rrx__mute{margin-left:18px}
}

@media (max-width:1100px){
  section[id*="image-slider"] .tp-rrx__left{margin-left:0;padding-left:0}
}

@media (max-width:767px){
  section[id*="image-slider"] .tp-rrx__wrap{padding:0 15px;width:100%!important}
  section[id*="image-slider"] .tp-rrx__stage{height:auto;flex-direction:column;align-items:stretch}
  section[id*="image-slider"] .tp-rrx__left{width:100%}
  section[id*="image-slider"] .tp-rrx__imgBox{height:52vh;min-height:320px}
  section[id*="image-slider"] .tp-rrx__card{width:100%!important;margin:18px 0 0!important;transform:none;padding:20px 0}
  section[id*="image-slider"] .tp-rrx__right{width:100%;height:220px;margin-top:14px;transform:none}
  section[id*="image-slider"] .tp-rrx__preview img{width:120%;transform:translateX(-10%)}

  section[id*="image-slider"] .tp-rrx__dots{padding:0 45px;min-height:50px;margin-top:15px;justify-content:center}
  section[id*="image-slider"] .tp-rrx__dot .tp-rrx__pm{display:none!important}

  section[id*="image-slider"] .tp-rrx__dots::before,
  section[id*="image-slider"] .tp-rrx__dots::after{
    position:absolute;top:50%;width:var(--tp-plus-minus-size);height:var(--tp-plus-minus-size);
    transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
    font-family:Arial,sans-serif;line-height:1;z-index:10;font-weight:750;
  }
  section[id*="image-slider"] .tp-rrx__dots::before{content:"+";left:8px;font-size:34px}
  section[id*="image-slider"] .tp-rrx__dots::after{content:"\2013";right:8px;font-size:34px}

  section[id*="image-slider"] .tp-rrx__mute{
    position:absolute;
    right:16px;
    top:-30px;
    font-size:12px;
  }
}

@media (min-width:768px){
  section[id*="image-slider"] .tp-rrx__left{--tp-left-bleed-vw:calc(50vw - 50%)}
  section[id*="image-slider"] .tp-rrx__left .tp-rrx__imgBox{width:calc(100% + var(--tp-left-bleed-vw))!important;margin-left:calc(-1 * var(--tp-left-bleed-vw))!important}
  section[id*="image-slider"] .tp-rrx__right{margin-left:auto!important;margin-right:calc(var(--tp-slider-padding-side) * -2)!important}
}

section[id*="image-slider"] .tp-rrx-hide-original{display:none!important}
</style>

<script>
!function(){
var CONFIG = {
  autoplayAudio: false,
  autoplaySlide: true
};
var t='section[id*="image-slider"]';function e(t,e){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function i(t){return t?t.getAttribute("data-src")||t.getAttribute("data-image")||t.currentSrc||t.src||"":""}function n(t,e){if(t=(t||"").trim(),!t)return e;if(t.indexOf("ms")>-1)return parseFloat(t)||e;if(t.indexOf("s")>-1)return 1e3*(parseFloat(t)||0)||e;return parseFloat(t)||e}function a(t){if(!t)return"";var e=t.innerHTML||"",i=e.indexOf("###");return i>-1?e.slice(0,i).replace(/(?:<br\s*\/?>\s*)+$/gi,"").trim():e}function r(t){if(!t)return"";var i=t.innerHTML||"",n=t.textContent||"";function a(t){if(!t)return"";var e=t.match(/https?:\/\/[^\s<>"')]+/g);return e&&e[0]?e[0].trim():""}if(i.indexOf("###")>-1){var r=i.split("###").slice(1).join("###"),s=r.match(/href\s*=\s*["']([^"']+)["']/i);if(s&&s[1])return(s[1]||"").trim();var o=a(r.replace(/<[^>]*>/g," "));if(o)return o}var c=n.indexOf("###");if(c>-1){var l=a(n.slice(c+3));if(l)return l}var u=e(t,"a[href]").map(function(t){return(t.getAttribute("href")||"").trim()}).filter(Boolean);return u[0]||a(n)||""}function s(t){return e(t,"li.list-item").map(function(t){var e=t.querySelector(".list-item-media img"),n=(t.querySelector(".list-item-content__title")||{}).textContent||"",s=t.querySelector(".list-item-content__description"),o=a(s),c=t.querySelector(".list-item-content__button"),l=c?c.getAttribute("href")||"":"",u=c?c.textContent||"":"",d=!!c&&"_blank"===c.getAttribute("target"),f=r(s);return{t:n.trim(),d:o,i:i(e),a:f,b:{text:(u||"").trim(),link:l,blank:!!d}}}).filter(function(t){return t.i||t.t||t.d||((t.b||{}).text)||t.a})}function o(t,i){if(i.length){var a=t.querySelector(".content")||t.querySelector(".content-wrapper")||t;if(!a||t.querySelector(".tp-rrx"))return;var r=document.createElement("div");r.innerHTML='<div class="tp-rrx"><div class="tp-rrx__wrap"><div class="tp-rrx__stage"><div class="tp-rrx__left"><div class="tp-rrx__slot tp-rrx__imgBox"><div class="tp-rrx__layer is-curr"><img class="tp-leftCurr" alt=""></div><div class="tp-rrx__layer is-next"><img class="tp-leftNext" alt=""></div></div></div><div class="tp-rrx__card"><div class="tp-rrx__slot tp-cardSlot"><div class="tp-rrx__layer is-curr tp-cardCurr" style="position:relative"><h2 class="tp-rrx__title tp-tCurr"></h2><div class="tp-rrx__desc tp-dCurr"></div><a class="tp-rrx__cta tp-bCurr"><span class="tp-rrx__ctaIcon">+</span><span class="tp-bTxtCurr"></span></a></div><div class="tp-rrx__layer is-next tp-cardNext"><h2 class="tp-rrx__title tp-tNext"></h2><div class="tp-rrx__desc tp-dNext"></div><a class="tp-rrx__cta tp-bNext"><span class="tp-rrx__ctaIcon">+</span><span class="tp-bTxtNext"></span></a></div></div></div><div class="tp-rrx__right"><div class="tp-rrx__slot tp-rrx__preview"><div class="tp-rrx__layer is-curr"><img class="tp-pCurr" alt=""></div><div class="tp-rrx__layer is-next"><img class="tp-pNext" alt=""></div></div></div></div><div class="tp-rrx__dots tp-dots"></div></div></div>';var s=r.firstElementChild;a.insertBefore(s,a.firstChild);var o=s.querySelector(".tp-leftCurr"),c=s.querySelector(".tp-leftNext"),l=s.querySelector(".tp-tCurr"),u=s.querySelector(".tp-dCurr"),d=s.querySelector(".tp-tNext"),f=s.querySelector(".tp-dNext"),v=s.querySelector(".tp-bCurr"),p=s.querySelector(".tp-bNext"),m=s.querySelector(".tp-bTxtCurr"),g=s.querySelector(".tp-bTxtNext"),h=s.querySelector(".tp-pCurr"),y=s.querySelector(".tp-pNext"),C=s.querySelector(".tp-dots"),b=s.querySelector(".tp-cardSlot"),x=s.querySelector(".tp-cardCurr"),S=s.querySelector(".tp-cardNext"),w=getComputedStyle(document.documentElement),q=parseInt(w.getPropertyValue("--tp-slide-duration"),10)||1400,A=n(w.getPropertyValue("--tp-autoplay-fallback"),6e3),L=parseFloat(w.getPropertyValue("--tp-volume-step"))||.15,T=parseFloat(w.getPropertyValue("--tp-start-volume"))||.22,k=0,M=!1,E=null,N=null,I=0,_=!1,B=!1,O=!0,D=!1,j=!1,H=!1,P=new Audio;function R(t){return Math.min(1,Math.max(0,t))}function z(){I&&(cancelAnimationFrame(I),I=0)}function F(t,e){var i=e&&e.text||"DISCOVER MORE",n=e&&e.link||"",a=!(!e||!e.blank);return t.setAttribute("aria-disabled",(!n).toString()),t.setAttribute("href",n||"#"),a?(t.setAttribute("target","_blank"),t.setAttribute("rel","noopener")):(t.removeAttribute("target"),t.removeAttribute("rel")),i}function U(){b.style.minHeight="";var t=Math.ceil(x.getBoundingClientRect().height||0),e=Math.ceil(S.getBoundingClientRect().height||0);b.style.minHeight=Math.max(t,e,1)+"px"}function V(t){var e=i[t],n=i[(t+1)%i.length];o.src=e.i||"",l.textContent=e.t||"",u.innerHTML=e.d||"",m.textContent=F(v,e.b),h.src=n&&n.i||e.i||"",U()}function G(t){var e=i[t],n=i[(t+1)%i.length];c.src=e.i||"",d.textContent=e.t||"",f.innerHTML=e.d||"",g.textContent=F(p,e.b),y.src=n&&n.i||e.i||"",U()}function W(){C.innerHTML=i.map(function(t,e){return'<button type="button" class="tp-rrx__dot" data-i="'+e+'" aria-label="Go to slide '+(e+1)+'"><svg class="tp-rrx__ring" viewBox="0 0 36 36" aria-hidden="true"><circle cx="18" cy="18" r="16"></circle></svg><i aria-hidden="true"></i><span class="tp-rrx__pm tp-minus" role="button" tabindex="-1" aria-label="Volume down"></span><span class="tp-rrx__pm tp-plus" role="button" tabindex="-1" aria-label="Volume up"></span></button>'}).join("");var t=document.createElement("button");t.type="button",t.className="tp-rrx__mute",t.setAttribute("aria-label","Mute audio"),t.textContent="MUTE",C.appendChild(t)}function X(t){return C.querySelector('.tp-rrx__dot[data-i="'+t+'"]')}function Y(){return e(C,".tp-rrx__dot")}function $(){return C.querySelector(".tp-rrx__mute")}function J(t,e){var i=t&&t.querySelector(".tp-rrx__ring circle");if(i){var n=Math.min(1,Math.max(0,e||0));i.style.strokeDashoffset=100*(1-n)}}function K(t){Y().forEach(function(t){t.classList.remove("is-active","tp-engaged","tp-audio-on"),J(t,0)});var e=X(t);e&&(e.classList.add("is-active"),_&&e.classList.add("tp-engaged"),i[t]&&i[t].a&&e.classList.add("tp-audio-on"))}function Q(){_=!0;var t=X(k);t&&t.classList.add("tp-engaged")}function Z(){if(P.paused)return void(I=0);var t=X(k);if(!t)return void(I=0);var e=P.duration,i=0;i=Number.isFinite(e)&&e>0?P.currentTime/e:P.currentTime*1e3/A,J(t,i),i>=1?I=0:I=requestAnimationFrame(Z)}function tt(){z(),I=requestAnimationFrame(Z)}function et(t){var e=i[t]&&i[t].a||"",n=X(t);return n&&(n.classList.toggle("tp-audio-on",!!e),_&&n.classList.add("tp-engaged")),e?(P.src=e,P.onended=function(){z(),J(X(k),1),CONFIG.autoplaySlide&&at((k+1)%i.length,!0,!0)},P.currentTime=0,P.play().then(function(){return tt(),!0}).catch(function(){return!1})):(J(n,0),Promise.resolve(!1))}function it(){var t=$();t&&(t.classList.toggle("is-muted",B),t.textContent=B?"UNMUTE":"MUTE",t.setAttribute("aria-label",B?"Unmute audio":"Mute audio"))}function nt(){B?P.muted=!0:O?H?(P.muted=!1,P.volume=R(P.volume||T)):P.muted=!1:P.muted=!0}function at(t,e,n){if(!(t<0||t>=i.length))return t===k?(K(k),void((n||e)&&(nt(),et(k)))):void(M?E=t:(M=!0,rt(),G(t),s.classList.add("is-anim"),N=setTimeout(function(){!function(t,e){k=t,V(k),G((k+1)%i.length),s.classList.remove("is-anim"),M=!1,rt(),K(k),null!==E?(e=E,E=null,K(e),void at(e,!1,!0)):e&&(nt(),et(k));var e}(t,!!e)},q)))}function rt(){clearTimeout(N),N=null}function st(){var t=window.innerWidth>=768,i=!!C.querySelector(".tp-rrx__audio");if(!t){if(i){var n=C.querySelector(".tp-rrx__dotRow"),a=C.querySelector(".tp-rrx__mute");if(n){var r=e(n,".tp-rrx__dot");C.classList.remove("tp-audiobar"),C.innerHTML="",r.forEach(function(t){C.appendChild(t)}),a&&C.appendChild(a)}}}else if(!i){var s=e(C,".tp-rrx__dot"),o=C.querySelector(".tp-rrx__mute"),c=document.createElement("div");c.className="tp-rrx__dotRow",s.forEach(function(t){c.appendChild(t)}),C.classList.add("tp-audiobar");var l=document.createElement("div");l.className="tp-rrx__audio",l.textContent="AUDIO";var u=document.createElement("button");u.type="button",u.className="tp-rrx__edge tp-plus",u.setAttribute("aria-label","Volume up"),u.innerHTML="<span>+</span>";var d=document.createElement("button");d.type="button",d.className="tp-rrx__edge tp-minus",d.setAttribute("aria-label","Volume down"),d.innerHTML="<span>–</span>",C.innerHTML="",C.appendChild(l),C.appendChild(u),C.appendChild(c),C.appendChild(d),o&&C.appendChild(o)}}function ot(){H||(H=!0,nt())}P.preload="auto",P.volume=Math.max(0,Math.min(1,T)),P.muted=!1,document.addEventListener("pointerdown",ot,{once:!0,capture:!0}),document.addEventListener("keydown",ot,{once:!0,capture:!0}),C.addEventListener("pointerdown",function(t){if(t.target.closest(".tp-rrx__mute"))return t.preventDefault(),t.stopPropagation(),void(B=!B,nt(),it());var e=0,i=t.target.closest(".tp-rrx__edge");if(i)return e=i.classList.contains("tp-plus")?L:-L,t.preventDefault(),t.stopPropagation(),_||Q(),B&&(B=!1,it()),O||(O=!0),ot(),P.volume=R((Number.isFinite(P.volume)?P.volume:T)+e),void(P.muted=!1);if(window.innerWidth<768){var n=C.getBoundingClientRect(),a=t.clientX-n.left;if(a<45)e=L;else{if(!(a>n.width-45))return;e=-L}}else{var r=t.target.closest(".tp-rrx__pm");if(!r)return;e=r.classList.contains("tp-plus")?L:-L}t.preventDefault(),t.stopPropagation(),_||Q(),B&&(B=!1,it()),O||(O=!0),ot(),P.volume=R((Number.isFinite(P.volume)?P.volume:T)+e),P.muted=!1},{passive:!1}),C.addEventListener("click",function(t){if(t.target.closest(".tp-rrx__mute"))return void t.preventDefault();if(t.target.closest(".tp-rrx__edge"))return void t.preventDefault();if(window.innerWidth<768){var e=C.getBoundingClientRect(),n=t.clientX-e.left;if(n<45||n>e.width-45)return}var a=t.target.closest(".tp-rrx__dot");if(!a)return;if(t.target.closest(".tp-rrx__pm"))return;t.preventDefault();var r=+a.dataset.i;if(_||Q(),B&&(B=!1,it()),O||(O=!0),ot(),r===k)return function(){if(i[k]&&i[k].a){if(P.src!==(i[k].a||""))return nt(),void et(k);P.paused?(nt(),P.play().then(function(){tt()}).catch(function(){})):(P.pause(),z())}}(),void a.classList.add("tp-engaged");K(r),at(r,!0,!1)});var ct=null;window.addEventListener("resize",function(){clearTimeout(ct),ct=setTimeout(function(){U(),st(),ut()},120)}),document.addEventListener("visibilitychange",function(){if(document.hidden){z();try{P.pause()}catch(t){}}else P.paused||tt()}),W(),it(),st(),V(0),G(1%i.length),K(0);var lt=null;function ut(){if(!j&&function(t){if(!t)return!1;var e=t.getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight||0;return e.top<.78*i&&e.bottom>.22*i}(s)){if(j||D)return;if(!CONFIG.autoplayAudio)return;D=!0,D||(D=!0,Q(),K(0)),P.volume=R(Number.isFinite(P.volume)?P.volume:T),P.muted=!1,et(0).then(function(t){t?(j=!0,D=!1):(P.muted=!0,et(0).then(function(t){t&&(j=!0),D=!1}))})}}!function(){if(lt)return;(lt=new IntersectionObserver(function(t){for(var e=0;e<t.length;e++)t[e].isIntersecting&&ut()},{root:null,rootMargin:"-15% 0px -30% 0px",threshold:[0,.06,.12,.2]})).observe(s)}(),setTimeout(ut,120),setTimeout(ut,420),window.addEventListener("scroll",ut,{passive:!0})}}function c(t){var i=t.querySelector("ul.user-items-list-item-container.user-items-list-simple");i&&(i.classList.add("tp-rrx-hide-original"),o(t,s(i)))}function l(){e(document,t).forEach(c)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",l):l()}();
</script>

 

#2. Customize

All style options here (Line 03 to Line 74)

#2.1. If you see Team Section still appears 1-2 section before disappear, use this code to Custom CSS

section#image-slider .user-items-list {
    display: none !important;
}

#2.2. You can enable/disable autoplay audio here