scrimba
Note at 2:47
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 2:47
AboutCommentsNotes
Note at 2:47
Expand for more info
index.js
run
preview
console
const gallery = document.querySelector('.gallery');
const prev = document.querySelector('.previous');
const next = document.querySelector('.next');
const numCards = gallery.getElementsByClassName('card').length;
const cardWidth = 220;
const totalXOffset = (numCards - 1) * cardWidth * -1; // end of second last card is leftmost x coordinate of last card (numCards - 1).
let offset = 0;

prev.removeEventListener('click', goPrev);
next.addEventListener('click', goNext);

prev.style.opacity = 0.3;
next.style.opacity = 1.0;

function goPrev() {
next.style.opacity = 1.0;
next.addEventListener('click', goNext);
offset += cardWidth;
gallery.style.transform = `translateX(${offset}px)`;
if (offset === 0) {
prev.style.opacity = 0.3;
prev.removeEventListener('click', goPrev);
} else {
prev.style.opacity = 1.0;
}
}

function goNext() {
prev.style.opacity = 1.0;
prev.addEventListener('click', goPrev);
offset -= cardWidth;
gallery.style.transform = `translateX(${offset}px)`;
if (offset === totalXOffset) {
next.style.opacity = 0.3;
next.removeEventListener('click', goNext);
} else {
next.style.opacity = 1.0;
}
}
Console
/index.html
LIVE