// if(counter == 0) counter = len
move_gallery(--counter)
button_control()
console.log(`perv, ${counter}`)
})
next.addEventListener("click", ()=>{
// if(counter == len-1) counter = -1
move_gallery(++counter)
button_control()
console.log(`next, ${counter}`)
})
// extra stuff
document.addEventListener('keyup', (event) => {
if (event.key == 'ArrowLeft') {
console.log("show previous")
move_gallery(--counter)
button_control()
}else if (event.key == 'ArrowRight') {
console.log("show next")
move_gallery(++counter)
button_control()
}
});
// javascript
let counter = 0
let len = document.querySelectorAll(".card").length
let gallery = document.querySelector(".gallery")
let next = document.querySelector(".next")
let prev = document.querySelector(".previous")
const move_gallery = (c) => {
if(c == len) {
counter = c = 0
}
else if(c == -1) {
counter = c = len - 1
}
gallery.style.transform = `translateX(${-(c * 220)}px)`
}
const button_control = () =>{
if(counter > 0 || counter <len-2){
if(next.style.opacity != 1){
next.style.opacity = 1
}
if(prev.style.opacity != 1){
prev.style.opacity = 1
}
}
if(counter == len -1){
next.style.opacity = "0.3"
}
if(counter == 0){
prev.style.opacity = "0.3"
}
}
prev.addEventListener("click", ()=>{