carousel3

<!-- @tuanphan - Carousel 3 -->
<style>
:root{
  --tp-hero-width-center:360px;
  --tp-hero-width-side:220px;
  --tp-hero-distance:260px;
  --tp-hero-spacing:40px;
  --tp-hero-fade:0.35;
  --tp-hero-ratio-h:1.3333;       /* height/width (3:4 => 4/3) */
}
section[id*="carousel3"] ul.user-items-list-item-container.user-items-list-simple{display:none!important}.tp-hero-team .tp-hero-carousel{max-width:1200px;margin:0 auto;padding:80px 20px 40px}.tp-hero-team .tp-hero-track{position:relative;height:calc(var(--tp-hero-width-center) * var(--tp-hero-ratio-h))}.tp-hero-team .tp-hero-slide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);opacity:var(--tp-hero-fade);transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .55s cubic-bezier(.22,1,.36,1);z-index:1}.tp-hero-team .tp-hero-slide-inner{width:var(--tp-hero-width-side);position:relative;overflow:hidden;border-radius:6px}.tp-hero-team .tp-hero-slide-inner::before{content:"";display:block;padding-bottom:calc(var(--tp-hero-ratio-h) * 100%)}.tp-hero-team .tp-hero-slide-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.tp-hero-team .tp-hero-slide.is-center{opacity:1;z-index:3;transform:translate(-50%,-50%) scale(1.05)}.tp-hero-team .tp-hero-slide.is-center .tp-hero-slide-inner{width:var(--tp-hero-width-center)}.tp-hero-team .tp-hero-slide.is-left{transform:translate(calc(-50% - var(--tp-hero-distance) - var(--tp-hero-spacing)),-50%) scale(.95);z-index:2}.tp-hero-team .tp-hero-slide.is-right{transform:translate(calc(-50% + var(--tp-hero-distance) + var(--tp-hero-spacing)),-50%) scale(.95);z-index:2}.tp-hero-team .tp-hero-slide.is-hidden{opacity:0;transform:translate(-50%,-50%) scale(.8);pointer-events:none}.tp-hero-team .tp-hero-controls{max-width:900px;margin:30px auto 0;display:flex;justify-content:space-between;align-items:center}.tp-hero-team .tp-hero-controls button{background:#fff0;border:none;cursor:pointer;padding:6px 10px}.tp-hero-team .tp-hero-controls svg{width:32px;height:auto}
@media (max-width:767px){:root{--tp-hero-width-center:150px;--tp-hero-width-side:100px;--tp-hero-distance:125px;--tp-hero-spacing:10px}.tp-hero-team .tp-hero-carousel{padding:0}.tp-hero-team .tp-hero-track{height:calc(var(--tp-hero-width-center) * var(--tp-hero-ratio-h))}}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){var sections=document.querySelectorAll('section[id*="carousel3"]');sections.forEach(function(section){var list=section.querySelector('ul.user-items-list-item-container.user-items-list-simple');if(!list)return;var parent=list.parentNode;var images=list.querySelectorAll('img.list-image');if(!images.length)return;var wrapper=document.createElement('div');wrapper.className='tp-hero-team';var carousel=document.createElement('div');carousel.className='tp-hero-carousel';var track=document.createElement('div');track.className='tp-hero-track';carousel.appendChild(track);images.forEach(function(img){var src=img.getAttribute('data-image')||img.getAttribute('data-src')||img.src;if(!src)return;var slide=document.createElement('div');slide.className='tp-hero-slide';var inner=document.createElement('div');inner.className='tp-hero-slide-inner';var newImg=document.createElement('img');newImg.src=src;inner.appendChild(newImg);slide.appendChild(inner);track.appendChild(slide)});var controls=document.createElement('div');controls.className='tp-hero-controls';controls.innerHTML='<button aria-label="Previous Slide"type=button data-tp-prev>'+'<div class=tp-control-btn>'+'<svg viewBox="0 0 60 30">'+'<path d=M15.9,23.7L7.1,15l8.7-8.7 fill=none stroke=currentColor stroke-width=2></path>'+'<path d=M52.9,15H8.5 fill=none stroke=currentColor stroke-width=2></path>'+'</svg>'+'</div>'+'</button>'+'<button aria-label="Next Slide"type=button data-tp-next>'+'<div class=tp-control-btn>'+'<svg viewBox="0 0 60 30">'+'<path d=M44.1,6.3l8.7,8.7l-8.7,8.7 fill=none stroke=currentColor stroke-width=2></path>'+'<path d=M7.1,15h44.4 fill=none stroke=currentColor stroke-width=2></path>'+'</svg>'+'</div>'+'</button>';wrapper.appendChild(carousel);wrapper.appendChild(controls);parent.insertBefore(wrapper,list.nextSibling);var slides=Array.prototype.slice.call(track.querySelectorAll('.tp-hero-slide'));if(!slides.length)return;var current=0;function updateSlides(){var total=slides.length;slides.forEach(function(slide,index){slide.classList.remove('is-left','is-center','is-right','is-hidden');if(index===current){slide.classList.add('is-center')}else if(index===(current-1+total)%total){slide.classList.add('is-left')}else if(index===(current+1)%total){slide.classList.add('is-right')}else{slide.classList.add('is-hidden')}})}
function go(delta){var total=slides.length;current=(current+delta+total)%total;updateSlides()}
updateSlides();var prevBtn=controls.querySelector('[data-tp-prev]');var nextBtn=controls.querySelector('[data-tp-next]');if(prevBtn){prevBtn.addEventListener('click',function(e){e.preventDefault();go(-1)})}
if(nextBtn){nextBtn.addEventListener('click',function(e){e.preventDefault();go(1)})}})})
</script>

 

Buy me a coffee