52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
// Carousel auto-rotation + hover-flip
|
|
(function init(){
|
|
var cards=document.querySelectorAll('.carousel-card');
|
|
if(!cards.length){setTimeout(init,500);return;}
|
|
var cardArr=Array.from(cards),N=cardArr.length;
|
|
|
|
var track=document.querySelector('.carousel-track');
|
|
if(track){track.style.position='relative';track.style.display='block';}
|
|
|
|
var mid=Math.floor(N/2);
|
|
cardArr.forEach(function(c,i){
|
|
var s=c.style;
|
|
s.position='absolute';s.width='280px';s.height='360px';
|
|
s.left='50%';s.top='50%';s.marginLeft='-140px';s.marginTop='-180px';
|
|
s.cursor='pointer';s.transformOrigin='center center';s.willChange='transform,opacity';
|
|
c.setAttribute('data-pos',String(i-mid));
|
|
});
|
|
|
|
// 5 visible levels: 0(center) ±1 ±2 — smooth, continuous, no gaps
|
|
var posCfg=[
|
|
{s:1,x:0,z:5,o:1}, // 0
|
|
{s:.85,x:220,z:4,o:.7}, // ±1
|
|
{s:.65,x:390,z:3,o:.4}, // ±2
|
|
{s:.45,x:520,z:2,o:.15}, // ±3 — dim edge
|
|
{s:0,x:560,z:1,o:0} // ±4 — invisible, wrap point
|
|
];
|
|
|
|
function rotate(dir){
|
|
cardArr.forEach(function(c){
|
|
var p=parseInt(c.getAttribute('data-pos'))||0;
|
|
var np=p-dir;if(np>4)np=-4;if(np<-4)np=4;
|
|
c.setAttribute('data-pos',String(np));
|
|
});
|
|
cardArr.forEach(function(c){
|
|
var p=parseInt(c.getAttribute('data-pos'))||0;
|
|
var a=Math.abs(p),d=posCfg[Math.min(a,4)],x=p>=0?d.x:-d.x;
|
|
c.style.transition='all .6s cubic-bezier(.25,.1,.25,1)';
|
|
c.style.transform='translateX('+x+'px) scale('+d.s+')';
|
|
c.style.zIndex=d.z;c.style.opacity=d.o;
|
|
c.style.pointerEvents=a>3?'none':'auto';
|
|
});
|
|
}
|
|
rotate(0);
|
|
|
|
cardArr.forEach(function(c){
|
|
c.addEventListener('mouseenter',function(){c.classList.add('flipped');});
|
|
c.addEventListener('mouseleave',function(){c.classList.remove('flipped');});
|
|
});
|
|
|
|
setInterval(function(){rotate(1);},3000);
|
|
})();
|