65 lines
1.5 KiB
JavaScript
65 lines
1.5 KiB
JavaScript
(function(){
|
|
const stage = document.getElementById('galleryStage');
|
|
const cards = Array.from(document.querySelectorAll('.photo-card'));
|
|
const dots = Array.from(document.querySelectorAll('.dot'));
|
|
let active = 0;
|
|
let timer = null;
|
|
const duration = 2800;
|
|
|
|
function setActive(index){
|
|
active = index % cards.length;
|
|
stage.classList.add('is-playing');
|
|
|
|
cards.forEach((card, i) => {
|
|
card.classList.remove('is-active','is-dim','is-next','is-exit');
|
|
const diff = (i - active + cards.length) % cards.length;
|
|
if(i === active){
|
|
card.classList.add('is-active');
|
|
}else if(diff === 1 || diff === 2){
|
|
card.classList.add('is-next');
|
|
}else if(diff === cards.length - 1){
|
|
card.classList.add('is-exit');
|
|
}else{
|
|
card.classList.add('is-dim');
|
|
}
|
|
});
|
|
|
|
dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
|
|
}
|
|
|
|
function next(){
|
|
setActive(active + 1);
|
|
}
|
|
|
|
function start(){
|
|
stop();
|
|
timer = setInterval(next, duration);
|
|
}
|
|
|
|
function stop(){
|
|
if(timer) clearInterval(timer);
|
|
}
|
|
|
|
cards.forEach((card, i) => {
|
|
card.addEventListener('mouseenter', () => {
|
|
stop();
|
|
setActive(i);
|
|
});
|
|
card.addEventListener('mouseleave', start);
|
|
});
|
|
|
|
dots.forEach((dot, i) => {
|
|
dot.addEventListener('click', () => {
|
|
setActive(i);
|
|
start();
|
|
});
|
|
});
|
|
|
|
window.addEventListener('load', () => {
|
|
setTimeout(() => {
|
|
setActive(0);
|
|
start();
|
|
}, 900);
|
|
});
|
|
})();
|