DEV Community

loading...
Cover image for Day 15 of JavaScriptmas - Carousel Solution

Day 15 of JavaScriptmas - Carousel Solution

flyingduck92 profile image Sekti ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app