scrimba
Note at 2:49
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:49
AboutCommentsNotes
Note at 2:49
Expand for more info
index.js
run
preview
console
// javascript

const next = document.getElementById('next')
const previous = document.getElementById('previous')
const gallery = document.getElementById('gallery')
let value = 0;

next.addEventListener('click', next_pic_at_click)
document.addEventListener('keyup', next_pic)
previous.addEventListener('click', previous_pic)


function next_pic_at_click (event){
if(value !== -880){value -= 220}
gallery.style.transform = `translateX(${value}px)`
}

function next_pic (event){
switch(event.keyCode){
case 39:
if(value !== -880){value -= 220}
gallery.style.transform = `translateX(${value}px)`
break;
case 37:
previous_pic()
break;
}
}

function previous_pic (){
if(value !== 0){value += 220}
gallery.style.transform = `translateX(${value}px)`
}
Console
/index.html
LIVE