How to hide button after slide?

Issue

I have a slider with "next" and "previous" buttons, "previous" button is hidden.

I want to hide "next" button when last slide is shown and show "previous" button after first transform of the slide.

Want to implement it in Javascript, can you please help me?

let next = document.querySelector('.btn_next_slide'),
prev = document.querySelector('.btn_prev_slide'),
line = document.querySelector('.product_slider_line'),
slides = document.getElementsByClassName('product_slider').length,
step = document.querySelector('.product_slider').clientWidth
count = 0;

next.onclick = ()=> {
    count ++;

    if (count >= slides-1) count = slides-2;
    line.style.transform = 'translate(' + `${- step * count}px)`;
};

prev.onclick = ()=> {
    count --;

    if (count <= 0) count = 0;
    line.style.transform = 'translate(' + `${- step * count}px)`;
};

Solution

You could add a function which updates the visibility after every slide-change.

let next = document.querySelector('.btn_next_slide'),
    prev = document.querySelector('.btn_prev_slide'),
    line = document.querySelector('.product_slider_line'),
    slides = document.getElementsByClassName('product_slider').length,
    step = document.querySelector('.product_slider').clientWidth,
    count = 0;

next.onclick = () => {
    count++;
    if (count >= slides - 1) count = slides - 2;
    line.style.transform = 'translate(' + `${- step * count}px)`;
    updateButtonVisibility();
};
prev.onclick = () => {
    count--;
    if (count <= 0) count = 0;
    line.style.transform = 'translate(' + `${- step * count}px)`;
    updateButtonVisibility();
};

function updateButtonVisibility() {
    if (count === 0) {
        // first slide
        prev.style.visibility = 'hidden';
        next.style.visibility = 'visible';
    } else if (count === slides - 2) {
        // last slide
        prev.style.visibility = 'visible';
        next.style.visibility = 'hidden';
    } else {
        // medium slide
        prev.style.visibility = 'visible';
        next.style.visibility = 'visible';
    }
}

Answered By - Johannes Wulf