36 lines
902 B
JavaScript
36 lines
902 B
JavaScript
const prevBtn = document.querySelector('.arrow--prev');
|
|
const nextBtn = document.querySelector('.arrow--next');
|
|
const items = Array.from(document.querySelectorAll('.gallery__item'));
|
|
let activeIndex = 0;
|
|
|
|
function updateGallery() {
|
|
items.forEach((item, i) => {
|
|
item.style.opacity = i === activeIndex ? '1' : '0.35';
|
|
item.style.transform = i === activeIndex ? 'scale(1)' : 'scale(0.95)';
|
|
});
|
|
}
|
|
|
|
function showNext() {
|
|
activeIndex = (activeIndex + 1) % items.length;
|
|
updateGallery();
|
|
}
|
|
|
|
function showPrev() {
|
|
activeIndex = (activeIndex - 1 + items.length) % items.length;
|
|
updateGallery();
|
|
}
|
|
|
|
nextBtn.addEventListener('click', showNext);
|
|
prevBtn.addEventListener('click', showPrev);
|
|
|
|
// keyboard support
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'ArrowRight') {
|
|
showNext();
|
|
}
|
|
if (event.key === 'ArrowLeft') {
|
|
showPrev();
|
|
}
|
|
});
|
|
|
|
updateGallery(); |