Day 15 of JavaScriptmas - Carousel Solution

Day 15 Carousel control challenge.

The challenge already provided with HTML and CSS below.

HTML

<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>

CSS

/*
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;
}

The controller is by giving the event listener onClick on Next and Previous button. Each time next and previous is clicked, the gallery move to left/right by 220px.

This is the JavaScript solution

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';
    }
});