Description
- auto horizontal slideshow with arrows, use Team List Section
#1. Install Code
#1.1. First, you need to add a Team Section (section with (i) icon)
Make sure you enabled these options.
Make sure you choose Simple List
At tab Content, add your desired text/image
#1.2. Upload Image, Title text
Next, enter your description/button text/url
#1.3. Next, hover on top right of section > Click Edit Section
at Anchor Link, enter words: p0126l01v4v2
p0126l01v4v2
#1.4. Next, hover on page where you use feature > Click Gear icon > Click Advanced > Paste this code
<!-- 01.26l01v4v2 Auto Horizontal Slideshow with Arrows -->
<script>
!function(){function t(t,e){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function e(t){return t&&(t.getAttribute("data-src")||t.getAttribute("data-image")||t.currentSrc||t.src)||""}function r(t){var e=t.querySelector(".tp-rrx__wrap"),r=t.querySelector(".tp-rrx__card"),n=t.querySelector(".tp-rrx__dots");if(e&&r&&n){var i=e.getBoundingClientRect(),o=r.getBoundingClientRect(),s=getComputedStyle(document.documentElement),a=parseFloat(s.getPropertyValue("--rrv2-dots-nudge"))||0,c=Math.max(0,Math.round(o.left-i.left+a));n.style.setProperty("--rrv2-dots-pad",c+"px")}}function n(e,n){if(n.length){var i=e.querySelector(".content")||e.querySelector(".content-wrapper")||e;if(i&&!e.querySelector(".tp-rrx")){var o=document.createElement("div");o.innerHTML='<div class="tp-rrx"><div class="tp-rrx__wrap"><div class="tp-rrx__stage tp-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 class="tp-rrx__cursor tp-cursor" aria-hidden="true"><svg class="caret-right" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg><svg class="caret-left" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div></div></div>';var s=o.firstElementChild;i.insertBefore(s,i.firstChild);var a,c,l=s.querySelector(".tp-cursor"),u=s.querySelector(".tp-rrx__imgBox"),d=s.querySelector(".tp-rrx__right"),p=s.querySelector(".tp-leftCurr"),v=s.querySelector(".tp-leftNext"),m=s.querySelector(".tp-tCurr"),x=s.querySelector(".tp-dCurr"),f=s.querySelector(".tp-tNext"),_=s.querySelector(".tp-dNext"),y=s.querySelector(".tp-bCurr"),g=s.querySelector(".tp-bNext"),h=s.querySelector(".tp-bTxtCurr"),S=s.querySelector(".tp-bTxtNext"),b=s.querySelector(".tp-pCurr"),q=s.querySelector(".tp-pNext"),C=s.querySelector(".tp-dots"),L=s.querySelector(".tp-cardSlot"),T=s.querySelector(".tp-cardCurr"),E=s.querySelector(".tp-cardNext"),w=getComputedStyle(document.documentElement),M=parseInt(w.getPropertyValue("--rrv2-slide-dur"),10)||1400,N=(a=w.getPropertyValue("--rrv2-auto"),c=6e3,(a=(a||"").trim())?a.indexOf("ms")>-1?parseFloat(a)||c:a.indexOf("s")>-1?1e3*(parseFloat(a)||0)||c:parseFloat(a)||c:c),B=0,k=!1,A=null,R=null,H=null,O=-1,I={},P=0,D=!1;C.addEventListener("click",(function(t){var e=t.target.closest(".tp-rrx__dot");if(e){t.preventDefault(),Y();var r=+e.dataset.i;Z(r,!0),et(r)}})),C.addEventListener("keydown",(function(t){var e=t.target.closest(".tp-rrx__dot");if(e&&("Enter"===t.key||" "===t.key)){t.preventDefault(),Y();var r=+e.dataset.i;Z(r,!0),et(r)}}));var F="",V=!1;ot(u,"prev"),ot(d,"next"),document.addEventListener("mousemove",(function(t){it(t)}));var z=null;window.addEventListener("resize",(function(){clearTimeout(z),z=setTimeout((function(){st(),K(),r(s)}),160)})),document.addEventListener("visibilitychange",(function(){document.hidden?$():(D||(Z(B,!0),tt()),K(),r(s))}));var j=null;C.innerHTML=n.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></button>'})).join(""),Q(0),U(1%n.length),Z(0,!0);var G=!1;document.fonts&&document.fonts.ready&&document.fonts.ready.then(at),setTimeout(at,650)}}function X(t){if(!t)return Promise.resolve();if(I[t])return I[t];var e=new Image;try{e.decoding="async"}catch(t){}e.src=t;var r=(e.decode?e.decode():new Promise((function(t){e.onload=e.onerror=t}))).catch((function(){}));return I[t]=r,r}function Y(){D=!0,clearTimeout(A),A=null}function J(t,e){var r=e&&e.text||"DISCOVER MORE",n=e&&e.link||"",i=!(!e||!e.blank);return t.setAttribute("aria-disabled",(!n).toString()),t.setAttribute("href",n||"#"),i?(t.setAttribute("target","_blank"),t.setAttribute("rel","noopener")):(t.removeAttribute("target"),t.removeAttribute("rel")),r}function K(){if(L&&T&&E){var t=Math.ceil(T.getBoundingClientRect().height||0),e=Math.ceil(E.getBoundingClientRect().height||0),r=Math.max(P||0,t,e,1);L.style.minHeight=r+"px"}}function Q(t){var e=n[t],r=n[(t+1)%n.length];p.src=e.i||"",m.textContent=e.t||"",x.innerHTML=e.d||"",h.textContent=J(y,e.b),b.src=r&&r.i||e.i||""}function U(t){var e=n[t],r=n[(t+1)%n.length];v.src=e.i||"",f.textContent=e.t||"",_.innerHTML=e.d||"",S.textContent=J(g,e.b),q.src=r&&r.i||e.i||""}function W(t){var e=t&&t.querySelector("svg.tp-rrx__ring"),r=e&&e.querySelector("circle");if(r){var n=r.cloneNode(!0);e.replaceChild(n,r),n.getBoundingClientRect()}}function Z(e,r){if(void 0===r&&(r=!0),e!==O){O=e;var n=t(C,".tp-rrx__dot");n.forEach((function(t){t.classList.remove("is-active")})),(i=n[e])&&(i.classList.add("is-active"),r&&W(i))}else{var i;r&&(i=C.querySelector(".tp-rrx__dot.is-active"))&&W(i)}}function $(){clearTimeout(A),A=null,clearTimeout(H),H=null}function tt(){D||(clearTimeout(A),A=setTimeout((function(){var t=(B+1)%n.length;Z(t,!0),et(t)}),N))}function et(t){if(!(t<0||t>=n.length)){if(t===B)return Z(B,!0),tt(),K(),void r(s);if(k)R=t;else{k=!0,$(),U(t),K();var e=function(){s.classList.add("is-anim"),H=setTimeout((function(){!function(t){if(Q(B=t),U((B+1)%n.length),s.classList.remove("is-anim"),k=!1,clearTimeout(H),H=null,Z(B,!1),K(),r(s),null!==R){var e=R;return R=null,Z(e,!0),void et(e)}tt()}(t)}),M)},i=X(v&&v.src),o=X(q&&q.src),a=!1,c=function(){a||(a=!0,e())};Promise.all([i,o]).then(c),setTimeout(c,160)}}}function rt(){return null!==R?R:-1!==O?O:B}function nt(t){V=!!(F=t||""),l&&(V?(l.classList.add("is-active"),"prev"===F?l.classList.add("is-prev"):l.classList.remove("is-prev"),document.body.style.cursor="none"):(l.classList.remove("is-active","is-prev"),document.body.style.cursor=""))}function it(t){V&&l&&(l.style.left=t.clientX+"px",l.style.top=t.clientY+"px")}function ot(t,e){t&&(t.addEventListener("mouseenter",(function(){nt(e)})),t.addEventListener("mousemove",(function(t){it(t)})),t.addEventListener("mouseleave",(function(){nt("")})),t.addEventListener("click",(function(t){var r;t.preventDefault(),Y(),"prev"===e?(Z(r=((k?rt():B)-1+n.length)%n.length,!0),et(r)):function(){var t=((k?rt():B)+1)%n.length;Z(t,!0),et(t)}()})))}function st(){if(L){var t=j||((j=document.createElement("div")).style.cssText="position:absolute;left:-99999px;top:0;visibility:hidden;pointer-events:none;contain:layout style;z-index:-1;",j.innerHTML='<div class="tp-rrx__card" style="transform:none!important;margin:0!important;padding:0!important;background:none!important"><div class="tp-rrx__slot" style="overflow:visible!important;border-radius:0!important;height:auto!important"><h2 class="tp-rrx__title"></h2><div class="tp-rrx__desc"></div><a class="tp-rrx__cta"><span class="tp-rrx__ctaIcon">+</span><span class="tp-xBtn"></span></a></div></div>',document.body.appendChild(j),j),e=s.querySelector(".tp-rrx__card");if(e){var r=e.getBoundingClientRect(),i=Math.max(1,Math.round(r.width));t.firstChild.style.width=i+"px";for(var o=t.querySelector(".tp-rrx__title"),a=t.querySelector(".tp-rrx__desc"),c=t.querySelector(".tp-xBtn"),l=0,u=0;u<n.length;u++){var d=n[u]||{};o.textContent=d.t||"",a.innerHTML=d.d||"",c.textContent=d.b&&d.b.text||"DISCOVER MORE";var p=Math.ceil(t.firstChild.getBoundingClientRect().height||0);p>l&&(l=p)}P=Math.max(P||0,l||0,1),L.style.minHeight=P+"px"}}}function at(){G||(G=!0,st(),K(),r(s),s.classList.add("is-ready"),tt(),setTimeout((function(){st(),K(),r(s)}),140),setTimeout((function(){st(),K(),r(s)}),520),setTimeout((function(){st(),K(),r(s)}),1100))}}function i(r){var i=r.querySelector("ul.user-items-list-item-container.user-items-list-simple");i&&(i.classList.add("tp-rrx-hide-original"),n(r,function(r){return t(r,"li.list-item").map((function(t){var r=t.querySelector(".list-item-media img"),n=(t.querySelector(".list-item-content__title")||{}).textContent||"",i=t.querySelector(".list-item-content__description"),o=i?i.innerHTML:"",s=t.querySelector(".list-item-content__button"),a=s&&s.getAttribute("href")||"",c=s&&s.textContent||"",l=!!s&&"_blank"===s.getAttribute("target");return{t:n.trim(),d:o,i:e(r),b:{text:(c||"").trim(),link:a,blank:!!l}}})).filter((function(t){return t.i||t.t||t.d||(t.b||{}).text}))}(i)))}function o(){t(document,'section[id*="p0126l01v4v2"]').forEach(i)}var s=0,a=0;function c(){t(document,'section[id*="p0126l01v4v2"] .tp-rrx').forEach(r)}function l(){cancelAnimationFrame(s),s=requestAnimationFrame(c)}function u(){clearTimeout(a),a=setTimeout(l,60)}window.addEventListener("resize",u,{passive:!0}),window.addEventListener("orientationchange",u,{passive:!0}),document.addEventListener("visibilitychange",(function(){document.hidden||l()}),{passive:!0}),new MutationObserver((function(t){for(var e=0;e<t.length;e++)for(var r=0;r<t[e].addedNodes.length;r++){var n=t[e].addedNodes[r];if(n&&1===n.nodeType&&(n.matches&&n.matches(".tp-rrx")||n.querySelector&&n.querySelector(".tp-rrx")))return void l()}})).observe(document.documentElement,{childList:!0,subtree:!0}),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(function(){o(),l()}),{once:!0}):(o(),l())}();
</script>
<!-- END 01.26l01v4v2 Auto Horizontal Slideshow with Arrows -->
#1.5. Next, use this code to Custom CSS
/* 01.26l01v4v2 Auto Horizontal Slideshow with Arrows */
:root {
--rrv2-bg: transparent;
--rrv2-wrap-max: 1280px;
--rrv2-wrap-pad: 56px;
--rrv2-stage-h: 520px;
--rrv2-left-w: 58%;
--rrv2-gap-1: 56px;
--rrv2-gap-2: 36px;
--rrv2-card-w: 420px;
--rrv2-card-pad: 46px;
--rrv2-preview-w: 150px;
--rrv2-preview-h: 360px;
--rrv2-radius: 6px;
--rrv2-dot: 6px;
--rrv2-ring: 22px;
--rrv2-ring-stroke: 2px;
--rrv2-auto: 6s;
--rrv2-slide-dur: 1500ms;
--rrv2-slide-ease: cubic-bezier(.18, .9, .18, 1);
--rrv2-slide-shift: 70px;
--rrv2-text: #000;
--rrv2-text-dur: 450ms;
--rrv2-card-shift: -15%;
--rrv2-preview-shift: 22%;
--rrv2-left-bleed: ~"calc(var(--rrv2-wrap-pad) + 20px)";
--rrv2-plus-nudge: -1px;
--rrv2-dots-nudge: 18px;
--rrv2-cursor-circle-size: 40px;
--rrv2-cursor-icon-size: 14px;
--rrv2-cursor-border: 2px;
--rrv2-cursor-stroke: 2px;
--rrv2-cursor-color: #fff;
}
@media (min-width:768px) and (max-width:1024px) {
:root {
--rrv2-wrap-pad: 24px;
--rrv2-left-bleed: 0px;
--rrv2-left-w: 62%;
--rrv2-card-w: 380px;
--rrv2-gap-1: 28px;
--rrv2-gap-2: 18px;
--rrv2-preview-w: 130px;
--rrv2-preview-h: 340px;
}
}
section[id*="p0126l01v4v2"]{overflow-x:hidden!important;width:100%}section[id*="p0126l01v4v2"] .tp-rrx,section[id*="p0126l01v4v2"] .tp-rrx *{box-sizing:border-box}section[id*="p0126l01v4v2"] .tp-rrx{min-height:1px;display:grid;place-items:center;padding:48px 0;background:var(--rrv2-bg);opacity:0}section[id*="p0126l01v4v2"] .tp-rrx.is-ready{opacity:1}section[id*="p0126l01v4v2"] .tp-rrx.is-anim .tp-rrx__layer.is-curr{animation:tpRrxOut var(--rrv2-slide-dur) var(--rrv2-slide-ease) forwards}section[id*="p0126l01v4v2"] .tp-rrx.is-anim .tp-rrx__layer.is-next{animation:tpRrxIn var(--rrv2-slide-dur) var(--rrv2-slide-ease) forwards}section[id*="p0126l01v4v2"] .tp-rrx.is-anim .tp-cardSlot .tp-rrx__layer.is-curr{animation:tpRrxOutText var(--rrv2-text-dur) var(--rrv2-slide-ease) forwards!important}section[id*="p0126l01v4v2"] .tp-rrx.is-anim .tp-cardSlot .tp-rrx__layer.is-next{animation:tpRrxInText var(--rrv2-text-dur) var(--rrv2-slide-ease) forwards!important}section[id*="p0126l01v4v2"] .tp-rrx__wrap{width:min(var(--rrv2-wrap-max),100%);padding:0 var(--rrv2-wrap-pad);position:relative}section[id*="p0126l01v4v2"] .tp-rrx__stage{height:var(--rrv2-stage-h);display:flex;align-items:center;justify-content:center;position:relative;-webkit-tap-highlight-color:transparent}section[id*="p0126l01v4v2"] .tp-rrx__left{width:var(--rrv2-left-w);margin-left:~"calc(var(--rrv2-left-bleed) * -1)";padding-left:var(--rrv2-left-bleed)}section[id*="p0126l01v4v2"] .tp-rrx__right{width:var(--rrv2-preview-w);height:var(--rrv2-preview-h);border-radius:var(--rrv2-radius);overflow:hidden;transform:translateY(var(--rrv2-preview-shift))}section[id*="p0126l01v4v2"] .tp-rrx__slot{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--rrv2-radius)}section[id*="p0126l01v4v2"] .tp-rrx__layer{position:absolute;inset:0;opacity:1;transform:translate3d(0,0,0);will-change:transform,opacity}section[id*="p0126l01v4v2"] .tp-rrx__layer.is-next{opacity:0;transform:translate3d(var(--rrv2-slide-shift),0,0)}section[id*="p0126l01v4v2"] .tp-rrx__imgBox{width:100%;height:var(--rrv2-stage-h);border-radius:var(--rrv2-radius)}section[id*="p0126l01v4v2"] .tp-rrx__imgBox img{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0)}section[id*="p0126l01v4v2"] .tp-rrx__preview{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}section[id*="p0126l01v4v2"] .tp-rrx__preview img{width:220%;height:100%;object-fit:cover;transform:translate3d(-38%,0,0);opacity:.92;display:block;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}section[id*="p0126l01v4v2"] .tp-rrx__card{width:var(--rrv2-card-w);margin-left:var(--rrv2-gap-1);margin-right:var(--rrv2-gap-2);padding:var(--rrv2-card-pad);background:0 0;color:var(--rrv2-text);transform:translateY(var(--rrv2-card-shift))}section[id*="p0126l01v4v2"] .tp-rrx__card .tp-rrx__slot{overflow:visible!important;border-radius:0!important;height:auto!important}section[id*="p0126l01v4v2"] .tp-rrx__card .tp-rrx__layer{inset:0 auto auto 0!important;width:100%!important;transform:translate3d(0,0,0)}section[id*="p0126l01v4v2"] .tp-rrx__title{margin:0 0 14px;font-size:18px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--rrv2-text)}section[id*="p0126l01v4v2"] .tp-rrx__desc{margin:0 0 22px;font-size:12px;line-height:1.75;opacity:.9;max-width:360px;color:var(--rrv2-text)}section[id*="p0126l01v4v2"] .tp-rrx__desc p{margin:0}section[id*="p0126l01v4v2"] .tp-rrx__cta{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--rrv2-text);letter-spacing:.12em;font-size:12px;font-weight:600;text-transform:uppercase;position:relative;z-index:2}section[id*="p0126l01v4v2"] .tp-rrx__cta[aria-disabled="true"]{opacity:.45;pointer-events:none}section[id*="p0126l01v4v2"] .tp-rrx__ctaIcon{width:40px;height:40px;border-radius:999px;border:2px solid var(--rrv2-text);position:relative;display:grid;place-items:center;padding:0;line-height:1;color:rgba(255,255,255,0)}section[id*="p0126l01v4v2"] .tp-rrx__ctaIcon::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:var(--rrv2-text);transform:translateY(var(--rrv2-plus-nudge))}section[id*="p0126l01v4v2"] .tp-rrx__dots{margin-top:26px;display:flex;justify-content:center;gap:16px}section[id*="p0126l01v4v2"] .tp-rrx__dot{width:var(--rrv2-ring);height:var(--rrv2-ring);position:relative;display:grid;place-items:center;cursor:pointer;border:0;padding:0;background:rgba(255,255,255,0);appearance:none;-webkit-appearance:none}section[id*="p0126l01v4v2"] .tp-rrx__dot i,section[id*="p0126l01v4v2"] .tp-rrx__dot svg{pointer-events:none}section[id*="p0126l01v4v2"] .tp-rrx__dot i{width:var(--rrv2-dot);height:var(--rrv2-dot);border-radius:999px;background:rgba(0,0,0,.45)}section[id*="p0126l01v4v2"] .tp-rrx__dot.is-active i{background:#000}section[id*="p0126l01v4v2"] .tp-rrx__dot.is-active .tp-rrx__ring{opacity:1}section[id*="p0126l01v4v2"] .tp-rrx__dot.is-active .tp-rrx__ring circle{animation:tpRrxProgress var(--rrv2-auto) linear forwards}section[id*="p0126l01v4v2"] .tp-rrx__ring{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none;opacity:0}section[id*="p0126l01v4v2"] .tp-rrx__ring circle{fill:none;stroke:#000;stroke-width:var(--rrv2-ring-stroke);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}section[id*="p0126l01v4v2"] .tp-rrx-hide-original{display:none!important}section[id*="p0126l01v4v2"] .tp-rrx__cursor{position:fixed;width:var(--rrv2-cursor-circle-size);height:var(--rrv2-cursor-circle-size);border:var(--rrv2-cursor-border) solid var(--rrv2-cursor-color);border-radius:50%;pointer-events:none;z-index:999999;display:none;align-items:center;justify-content:center;transform:translate(-50%,-50%);transition:opacity .2s ease}section[id*="p0126l01v4v2"] .tp-rrx__cursor svg{width:var(--rrv2-cursor-icon-size);height:var(--rrv2-cursor-icon-size);stroke:var(--rrv2-cursor-color);stroke-width:var(--rrv2-cursor-stroke)}section[id*="p0126l01v4v2"] .tp-rrx__cursor .caret-left{display:none}section[id*="p0126l01v4v2"] .tp-rrx__cursor.is-active{display:flex}section[id*="p0126l01v4v2"] .tp-rrx__cursor.is-prev .caret-right{display:none}section[id*="p0126l01v4v2"] .tp-rrx__cursor.is-prev .caret-left{display:block}@media (hover:none),(pointer:coarse){section[id*="p0126l01v4v2"] .tp-rrx__cursor{display:none!important}}@media (min-width:768px) and (max-width:1024px){section[id*="p0126l01v4v2"] .tp-rrx__left{margin-left:0;padding-left:0;width:var(--rrv2-left-w)!important}section[id*="p0126l01v4v2"] .tp-rrx__stage{height:var(--rrv2-stage-h)!important;flex-direction:row!important;align-items:center!important;justify-content:center!important}section[id*="p0126l01v4v2"] .tp-rrx__imgBox{height:var(--rrv2-stage-h)!important;min-height:0!important}section[id*="p0126l01v4v2"] .tp-rrx__card{width:var(--rrv2-card-w)!important;margin-left:var(--rrv2-gap-1)!important;margin-right:var(--rrv2-gap-2)!important;padding:var(--rrv2-card-pad)!important;transform:translateY(var(--rrv2-card-shift))!important}section[id*="p0126l01v4v2"] .tp-rrx__right{--rrv2-right-bleed-vw:~"calc(50vw - 50%)";width:var(--rrv2-preview-w)!important;height:var(--rrv2-preview-h)!important;margin-top:0!important;margin-left:auto!important;margin-right:~"calc(-1 * var(--rrv2-right-bleed-vw))";transform:translateY(var(--rrv2-preview-shift))!important}section[id*="p0126l01v4v2"] .tp-rrx__preview img{width:220%!important;height:100%!important;object-fit:cover!important;transform:translate3d(-38%,0,0)!important}section[id*="p0126l01v4v2"] .tp-rrx__dots{width:100%!important;justify-content:flex-start!important;margin-left:0!important;margin-right:0!important;padding-left:var(--rrv2-dots-pad,0)!important;flex-wrap:nowrap}}@media (max-width:767px){section[id*="p0126l01v4v2"] .tp-rrx__wrap{padding:0 15px;width:100%!important}section[id*="p0126l01v4v2"] .tp-rrx__stage{height:auto;flex-direction:column;align-items:stretch}section[id*="p0126l01v4v2"] .tp-rrx__left{width:100%;margin-left:0;padding-left:0}section[id*="p0126l01v4v2"] .tp-rrx__imgBox{height:52vh;min-height:320px}section[id*="p0126l01v4v2"] .tp-rrx__card{width:100%!important;margin:18px 0 0!important;padding:40px 0 0 0!important;transform:none!important}section[id*="p0126l01v4v2"] .tp-rrx__right{width:100%;height:220px;margin-top:0;transform:none}section[id*="p0126l01v4v2"] .tp-rrx__preview img{width:120%;transform:translate3d(-10%,0,0)}}@media (min-width:1025px){section[id*="p0126l01v4v2"] .tp-rrx__left{--rrv2-left-bleed-vw:~"calc(50vw - 50%)"}section[id*="p0126l01v4v2"] .tp-rrx__left .tp-rrx__imgBox{width:~"calc(100% + var(--rrv2-left-bleed-vw))"!important;margin-left:~"calc(-1 * var(--rrv2-left-bleed-vw))"!important}section[id*="p0126l01v4v2"] .tp-rrx__right{--rrv2-right-bleed-vw:~"calc(50vw - 50%)";margin-left:auto!important;margin-right:~"calc(-1 * var(--rrv2-right-bleed-vw))"!important}section[id*="p0126l01v4v2"] .tp-rrx__dots{width:100%!important;justify-content:flex-start!important;margin-left:0!important;margin-right:0!important;padding-left:var(--rrv2-dots-pad,0)!important;flex-wrap:nowrap}}@keyframes tpRrxOutText{0%{opacity:1;transform:translate3d(0,0,0)}55%{opacity:0;transform:~"translate3d(calc(var(--rrv2-slide-shift) * -1),0,0)"}100%{opacity:0;transform:~"translate3d(calc(var(--rrv2-slide-shift) * -1),0,0)"}}@keyframes tpRrxInText{0%{opacity:0;transform:translate3d(var(--rrv2-slide-shift),0,0)}100%{opacity:1;transform:translate3d(0,0,0)}}@keyframes tpRrxOut{to{opacity:0;transform:~"translate3d(calc(var(--rrv2-slide-shift) * -1),0,0)"}}@keyframes tpRrxIn{to{opacity:1;transform:translate3d(0,0,0)}}@keyframes tpRrxProgress{to{stroke-dashoffset:0}}section[id*="p0126l01v4v2"] .user-items-list { display: none !important; }
/*END 01.26l01v4v2 Auto Horizontal Slideshow with Arrows */
#2. Customize
#2.1. To change dot/circle outline color, use this to Custom CSS
/* dots color */
section[id*="p0126l01v4v2"] .tp-rrx__dot i {
background: green !important;
}
/* dot active color */
section[id*="p0126l01v4v2"] .tp-rrx__dot.is-active i {
background: #f1f !important;
}
/* circle outline */
section[id*="p0126l01v4v2"] .tp-rrx__ring circle {
stroke: #f00 !important;
}
#2.2. To change arrows style, change these lines in Custom CSS (line 29 to line 33)
--rrv2-cursor-circle-size: 40px; --rrv2-cursor-icon-size: 14px; --rrv2-cursor-border: 2px; --rrv2-cursor-stroke: 2px; --rrv2-cursor-color: #fff;
#2.3. To make round corners of images, change this line (line 14)
--rrv2-radius: 6px;
