let previousBtn = document.querySelector(".previous")
let nextBtn = document.querySelector(".next")
let images = document.querySelectorAll(".gallery .card");
let gallery = document.querySelectorAll(".gallery");

let counter = 0


const handleClick=()=> {
  
gallery.forEach(slide=>{
    counter<images.length
    ?slide.style.transform = `translateX(-${counter * 220}px)`
    :counter===0
    slide.style.transition = 'all 2s ease' 
})

counter === images.length -1
  ?(nextBtn.style.opacity = 0.3) 
  :(nextBtn.style.opacity = 1) ;


counter > 0 
  ?previousBtn.style.opacity = 1
  :previousBtn.style.opacity = 0.3
  
//   opacity starts off at 0.3 in css so no need to add to code
}

 nextBtn.addEventListener('click', ()=>{
     if(images[counter + 1]){
         counter++
 
     }

 handleClick()  
 })


 previousBtn.addEventListener('click', ()=>{
     if(counter >0){
        counter-- 
     }

  handleClick()
 })