Disable button on specific slide

Question

i have make it an slider with 2 image, the first is Gotrade and second Midas. I want when im on first slide to not display the left arrow and when im on second the right arrow to not be displayed.

 if (firstSlide.classList.contains('active-slide')) {
 buttonLeft.style.display = 'none';
 buttonRight.style.display = 'flex';
} else if (secondSlide.classList.contains('second-slide')) {
 buttonLeft.style.display = 'flex';
 buttonRight.style.display = 'none';
}

I tried this but doesn't work. Here is the image for reference
https://i.sstatic.net/lTXdt.png
https://i.sstatic.net/82clB.png

Codepen: https://codepen.io/andrei-nistor/pen/ZEeeGEG

Answer 1

There are several things wrong with your code. For example, you're checking for a classname called active-slide, but nothing in your code sets a class with that name. If you're copying and pasting code from other sources without taking some time to understand it, it may be impossible to debug.

Instead of checking for the existence of a class that doesn't exist, you can instead check for which slide number you're on, and check if you're on the first or last slide. You also need to run this code after slide transitions, not once at the end of your program as you've shown in the Codepen. Here's an example of the working Javascript checking for slideIndex instead of a class:

var slideIndex = 1;

let firstSlide = document.querySelector('.first-slide');
let secondSlide = document.querySelector('.second-slide');
let buttonLeft = document.querySelector('.prev');
let buttonRight = document.querySelector('.next');

showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";

    if (slideIndex === 1) {
        buttonLeft.style.display = 'none';
        buttonRight.style.display = 'flex';
    } else if (slideIndex === slides.length) {
        buttonRight.style.display = 'none';
        buttonLeft.style.display = 'flex';
    }
}