scrimba
Solution for Day 15 of #javascriptmas
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

Solution for Day 15 of #javascriptmas
AboutCommentsNotes
Solution for Day 15 of #javascriptmas
Expand for more info
index.js
run
preview
console
// javascript
const gallery = document.querySelector('.gallery');
const galleryCards = document.querySelectorAll('.gallery > .card');
const previousBtn = document.querySelector('.previous');
const nextBtn = document.querySelector('.next');
let currentImage = 0;

function changeImage() {
if (currentImage == 0) previousBtn.style.opacity = '.3';
else previousBtn.style.opacity = '1';
if (currentImage == galleryCards.length - 1) nextBtn.style.opacity = '.3';
else nextBtn.style.opacity = '1';
gallery.style.transform = `translateX(-${currentImage * 220}px)`;
}

previousBtn.addEventListener('click', () => {
if (currentImage < 1) return;
currentImage --;
changeImage();
});

nextBtn.addEventListener('click', () => {
if (currentImage >= galleryCards.length - 1) return;
currentImage ++;
changeImage();
});
Console
/index.html
LIVE