Day 15 of JavaScriptmas - Carousel Solution

<div class="container"> <img src="previous.svg" class="previous" alt="previous image"> <div class="gallery-wrapper"> <div class="gallery"> <img class="card current" src="presents.jpg" alt="Christmas Cookies"> <img class="card" src="cookies.jpg" alt="Christmas Cookies"> <img class="card" src="santa.jpg" alt="Christmas Cookies"> <img class="card" src="candycane.jpg" alt="Christmas Cookies"> <img class="card" src="reindeer.jpg" alt="Christmas Cookies"> </div> </div> <img src="next.svg" class="next" alt="next image"> </div> 

/* Thanks to these fine individuals from Unsplash: https://unsplash.com/photos/AmzKuEnr1VY https://unsplash.com/photos/eDnJQL21amc https://unsplash.com/photos/LXy2DOOxESQ https://unsplash.com/photos/KBKHXjhVQVM https://unsplash.com/photos/PxM8aeJbzvk */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap'); html, body { margin: 0; padding: 0; height: 100vh; font-family: 'Playfair Display'; display: grid; justify-content: center; } img { width: 200px; } .previous, .next { width: 35px; } .previous { opacity: .3; } .container { display: grid; grid-template-columns: 20% 200px 20%; place-content: center; } .gallery-wrapper { overflow: hidden; width: 100%; } .previous, .next { justify-self: center; align-self: center; cursor: pointer; } .gallery { transform-style: preserve-3d; display: grid; grid-template-columns: repeat(5, auto); transform: translateX(0); } .card { margin-right: 20px; align-self: center; } 

let prev = document.querySelector('.previous'); let next = document.querySelector('.next'); let gallery = document.querySelector('.gallery'); gallery.style.transition = 'all .2s ease'; let current = 0; let move = 220; // Initial Prev load as hidden button if (current == 0) { prev.style.opacity = '0'; prev.style.visibilty= 'hidden'; prev.style.cursor= 'default'; } next.addEventListener('click', () => { if(current < 880) { gallery.style.transform = `translateX(-${current += move}px)`; prev.style.opacity = '1'; prev.style.visibilty= 'visible'; prev.style.cursor= 'pointer'; } if (current == 880) { next.style.opacity = '0'; next.style.visibilty= 'hidden'; next.style.cursor= 'default'; } }); prev.addEventListener('click', () => { if (current > 0) { gallery.style.transform = `translateX(-${current -= move}px)`; next.style.opacity = '1'; next.style.visibilty= 'visible'; next.style.cursor= 'pointer'; } if (current == 0) { prev.style.opacity = '0'; prev.style.visibilty= 'hidden'; prev.style.cursor= 'default'; } });