幻灯片后如何隐藏按钮？

Question

我有一个带有“下一个”和“上一个”按钮的滑块，“上一个”按钮是隐藏的。

我想在显示最后一张幻灯片时隐藏“下一张”按钮，并在第一次转换幻灯片后显示“上一张”按钮。

想用Javascript实现它，你能帮我吗？

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

Answer 1

您可以添加一个在每次幻灯片更改后更新可见性的功能。

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

Answer 2

    const buttons = document.querySelectorAll('[data-carousel-button]');

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    // show the buttons because they can be hidden before
    buttons[0].style.visibility = 'visible';
    buttons[1].style.visibility = 'visible';
    const positionChange = button.dataset.carouselButton === 'next' ? 1 : -1;
    const photos = button
      .closest('[data-carousel]')
      .querySelector('[data-photos]');
    let activePhoto = photos.querySelector('[data-active]');
    let newPosition =
      [...photos.children].indexOf(activePhoto) + positionChange;

    photos.children[newPosition].dataset.active = true;
    delete activePhoto.dataset.active;
    // Check if active slide is the first one or the last one
    if (newPosition === 0) buttons[0].style.visibility = 'hidden';
    if (newPosition === photos.children.length - 1 && button === buttons[1])
      buttons[1].style.visibility = 'hidden';
  });
});