scrimba
Note at 1:52
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 1:52
by
AboutCommentsNotes
Note at 1:52
by
Expand for more info
index.js
run
preview
console
const leftButton = document.querySelector('.previous');
const rightButton = document.querySelector('.next');
const gallery = document.querySelector('.gallery');
const pictures = document.querySelectorAll('.card');

let translate = 0;

let clickPrevious = (e) => {
if (translate < 0) {
translate = translate + 220;
gallery.style.transform = `translateX(${translate}px)`;
leftButton.style.opacity = 1;
} else {
leftButton.style.opacity = .3;
rightButton.style.opacity = 1;
}
}

let clickNext = (e) => {
if (translate > (pictures.length - 1) * (-220)) {
translate = translate - 220
gallery.style.transform = `translateX(${translate}px)`;
rightButton.style.opacity = 1;
} else {
rightButton.style.opacity = .3;
leftButton.style.opacity = 1;
}
};

leftButton.addEventListener("click", clickPrevious);
rightButton.addEventListener("click", clickNext);
Console
/index.html
LIVE