- View Demo – Password: abc
- My friend code this. If you need more support, you can email her via email: [email protected]
#1. Install Code
First, you need to add a Team Section (section with (i) icon)
Make sure enable these.
and add your text/image
and make sure you choose Simple List design
Next, find Team Section ID. Follow this guide on forum.
In my example, ID is:
section[data-section-id="693eaef46d7c4756aa43ed43"]
Next, hover on Page where you use Team section > Click Gear icon
Click Advanced > Paste this code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<style>
section[data-section-id="693eaef46d7c4756aa43ed43"] {
/* Configuration Variables */
--slider-max-width: 1100px;
--slider-height: 80vh;
--slider-min-height: 520px;
--left-panel-width: 35%;
--right-panel-width: 65%;
--arrow-button-bg-color: #fff;
--arrow-button-text-color: #9ca3af;
--arrow-button-hover-text: #111827;
--arrow-button-hover-bg: #f9fafb;
--arrow-button-font-size: 16px;
--arrow-button-padding: 12px 16px;
--arrow-button-border-radius: 5px;
--left-panel-text-color: white;
/* Mobile Configuration */
--mobile-min-height: 650px;
--mobile-aspect-ratio: 3/4;
--mobile-right-height: 58%;
--mobile-left-height: 42%;
--mobile-padding: 0 16px;
--mobile-button-gap: 10px;
.user-items-list-item-container{display:none}.slider-container{position:relative;overflow:hidden;width:100%;max-width:var(--slider-max-width);height:var(--slider-height);margin:0 auto;min-height:var(--slider-min-height)}.left-slide{height:100%;position:absolute;top:0;left:0;width:var(--left-panel-width);transition:transform .5s ease-in-out}.left-slide *{color:var(--left-panel-text-color)}.left-slide>div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 50px;box-sizing:border-box;height:100%;width:100%}.left-slide .list-item-content,.left-slide .list-item-content *{color:#fff!important}.right-slide{height:100%;position:absolute;top:0;left:var(--left-panel-width);width:var(--right-panel-width);transition:transform .5s ease-in-out}.right-slide>div{background-repeat:no-repeat;background-size:cover;background-position:center center;height:100%;width:100%}.slider-container .action-buttons button{background-color:var(--arrow-button-bg-color);border:0;color:var(--arrow-button-text-color);cursor:pointer;font-size:var(--arrow-button-font-size);padding:var(--arrow-button-padding);transition:color .2s ease-in,background-color .2s ease-in;position:absolute;left:var(--left-panel-width);top:50%;z-index:100}.slider-container .action-buttons button:hover{color:var(--arrow-button-hover-text);background-color:var(--arrow-button-hover-bg)}.slider-container .action-buttons button:focus{outline:0}.slider-container .action-buttons .down-button{border-top-left-radius:var(--arrow-button-border-radius);border-bottom-left-radius:var(--arrow-button-border-radius);transform:translateX(-100%)}.slider-container .action-buttons .up-button{border-top-right-radius:var(--arrow-button-border-radius);border-bottom-right-radius:var(--arrow-button-border-radius);transform:translateY(-100%)}@media(max-width:767px){.slider-container{height:auto;min-height:var(--mobile-min-height);aspect-ratio:var(--mobile-aspect-ratio);max-width:100%}.right-slide{left:0;top:0;width:100%;height:var(--mobile-right-height);display:flex;flex-direction:row;transition:transform .5s ease-in-out}.left-slide{left:0;top:var(--mobile-right-height);width:100%;height:var(--mobile-left-height);display:flex;flex-direction:row;transition:transform .5s ease-in-out}.right-slide>div,.left-slide>div{flex:0 0 100%;width:100%;height:100%}.left-slide>div{padding:var(--mobile-padding)}.slider-container .action-buttons{position:absolute;left:50%;top:var(--mobile-right-height);transform:translate(-50%,-50%);z-index:120;display:flex;gap:var(--mobile-button-gap)}.slider-container .action-buttons button{position:static;left:auto;top:auto;transform:none;border-radius:var(--arrow-button-border-radius);padding:var(--arrow-button-padding)}.slider-container .action-buttons .down-button{border-top-right-radius:0;border-bottom-right-radius:0;transform:translateX(0)}.slider-container .action-buttons .up-button{border-top-left-radius:0;border-bottom-left-radius:0;transform:translateX(0)}}}
</style>
<script> document.addEventListener("DOMContentLoaded",(function(){var e=document.querySelector('section[data-section-id="693eaef46d7c4756aa43ed43"]');if(e){var t=e.querySelector('.user-items-list-item-container[data-section-id="693eaef46d7c4756aa43ed43"]');if(t){var n=Array.prototype.slice.call(t.querySelectorAll(".list-item"));if(n.length){var a=["#FD3555","#2A86BA","#252E33","#FFB866"],r=document.createElement("div");r.className="slider-container";var l=document.createElement("div");l.className="left-slide";var i=document.createElement("div");i.className="right-slide";for(var s=0;s<n.length;s++){var o=n[s],c=o.querySelector(".list-item-content__title"),d=o.querySelector(".list-item-content__description"),m=d?Array.prototype.slice.call(d.querySelectorAll("p")):[],p="",f="";if(m.length){if(p=(m[0].textContent||"").trim(),m.length>1){for(var u=[],v=1;v<m.length;v++)u.push((m[v].textContent||"").trim());f=u.join(" ")}}else d&&(f=(d.textContent||"").trim());var h=o.querySelector("img.list-image"),y=h?h.currentSrc||h.src:"",x=document.createElement("div");x.style.backgroundColor=a[s%a.length];var C=document.createElement("h1");if(C.textContent=c?(c.textContent||"").trim():"",x.appendChild(C),p){var E=document.createElement("p");E.textContent=p,x.appendChild(E)}if(f){var g=document.createElement("p");g.textContent=f,x.appendChild(g)}l.appendChild(x);var w=document.createElement("div");y&&(w.style.backgroundImage="url('"+y+"')"),i.appendChild(w)}var L=document.createElement("div");L.className="action-buttons";var S=document.createElement("button");S.className="down-button";var q=document.createElement("button");q.className="up-button",L.appendChild(S),L.appendChild(q),r.appendChild(l),r.appendChild(i),r.appendChild(L),t.parentNode.insertBefore(r,t);var b=i.querySelectorAll("div").length,A=0,N=window.matchMedia("(max-width: 767px)"),k=N.matches,M=0,X=0;Y(),_(),window.addEventListener("resize",(function(){Y(),_()})),N.addEventListener?N.addEventListener("change",(function(){Y(),_()})):N.addListener&&N.addListener((function(){Y(),_()})),q.addEventListener("click",(function(){B("next")})),S.addEventListener("click",(function(){B("prev")}))}}}function Y(){k=N.matches,S.innerHTML=k?'<i class="fa fa-arrow-left"></i>':'<i class="fa fa-arrow-down"></i>',q.innerHTML=k?'<i class="fa fa-arrow-right"></i>':'<i class="fa fa-arrow-up"></i>'}function _(){k=N.matches,M=r.clientHeight,X=r.clientWidth,k?(l.style.top="58%",i.style.top="0",l.style.left="-"+(b-1)*X+"px",i.style.left="0",l.style.transform="translateX("+A*X+"px)",i.style.transform="translateX(-"+A*X+"px)"):(l.style.left="0",i.style.left="35%",l.style.top="-"+(b-1)*M+"px",l.style.transform="translateY("+A*M+"px)",i.style.transform="translateY(-"+A*M+"px)")}function B(e){"next"===e?++A>b-1&&(A=0):--A<0&&(A=b-1),k?(i.style.transform="translateX(-"+A*X+"px)",l.style.transform="translateX("+A*X+"px)"):(i.style.transform="translateY(-"+A*M+"px)",l.style.transform="translateY("+A*M+"px)")}}));
</script>
Next, remember to update Section ID in these lines (3 position)
Line 03
Line 28
#2. Customize
All style options in Line 04 to Line 25.
#2.1. To change Text Panel Background
use this code to Custom CSS
div.left-slide>div:nth-child(1) {
background-color: #f1f !important;
}
div.left-slide>div:nth-child(2) {
background-color: red !important;
}
div.left-slide>div:nth-child(3) {
background-color: green !important;
}
div.left-slide>div:nth-child(4) {
background-color: #000 !important;
}
#2.2. To change left panel text size, use this to Custom CSS
div.left-slide {
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
}
#2.3. To change arrow button style, change these lines (line 10 to Line 16)
--arrow-button-bg-color: #fff; --arrow-button-text-color: #9ca3af; --arrow-button-hover-text: #111827; --arrow-button-hover-bg: #f9fafb; --arrow-button-font-size: 16px; --arrow-button-padding: 12px 16px; --arrow-button-border-radius: 5px;
#2.4. To change left panel text color, change line 17
--left-panel-text-color: white;
#2.5. Currently title text is <h1> tag, if you need to change it to <h2> or <h3> just change this code
#2.6. To change space between title – description
You can use this code to Custom CSS
div.left-slide>div>* {
margin-bottom: 0px !important;
margin-top: 0px !important;
}
If you need more support (basic), you can message me on forum.
If you need to customize more complex features, you can email my friend.
- This code has full version, you can see it here (password: abc). With full version, no need to find ID and the code will be more optimized. You can contact her to get it.