幻灯片单图场景下隐藏Prev/Next箭头的实现需求

以下是生成包含3张图片的幻灯片HTML代码，其中显示了Prev <<和Next >>按钮：

<div class="wp-block-gallery">
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="image1.jpg" alt="image"> 
    </div>
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="image2.jpg" alt="image"> 
    </div>
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="image3.jpg" alt="image">
    </div>
    <span class="wpcookie-controls wpcookie-left-arrow"> << Prev </span> 
    <span class="wpcookie-controls wpcookie-right-arrow"> Next >> </span> 
</div>

我希望在幻灯片仅包含1张图片时隐藏<< Prev和Next >>按钮。单图时仍显示箭头会影响用户体验（UX）。

以下是生成该幻灯片的JS代码：

document.querySelectorAll(".wp-block-gallery")?.forEach( slider => {
    var src = [];
    var alt = [];
    var img = slider.querySelectorAll("img");
    /*Code by MKS Starts */
    var singleImage = img.length === 1; 
    var leftArrow = document.querySelector('.wpcookie-controls.wpcookie-left-arrow'); 
    var rightArrow = document.querySelector('.wpcookie-controls.wpcookie-right-arrow'); 
    rightArrow.style.pointerEvents = 'none';
    leftArrow.style.pointerEvents = 'none';
    /*Code by MKS Ends*/
    img.forEach( e => { src.push(e.src);   if (e.alt) { alt.push(e.alt); } else { alt.push("image"); } })
    let i = 0;
    let image = "";
    let myDot = "";
    src.forEach ( e => { image = image + `<div class="wpcookie-slide" > <img decoding="async" loading="lazy" src="${src[i]}" alt="${alt[i]}" > </div>`; i++ })
    i = 0;
    src.forEach ( e => { myDot = myDot + `<span class="wp-dot"></span>`; i++ })
    let dotDisply = "none";
    if (slider.classList.contains("dot")) dotDisply = "block";    
    const main = `<div class="wp-block-gallery">${image}<span class="wpcookie-controls wpcookie-left-arrow"  > << Prev </span> <span class="wpcookie-controls wpcookie-right-arrow" > Next >> </span> <div class="dots-con" style="display: ${dotDisply}"> ${myDot}</div></div> `       
    slider.insertAdjacentHTML("afterend",main  );
    slider.remove();
})

document.querySelectorAll(".wp-block-gallery")?.forEach( slider => { 
var slides = slider.querySelectorAll(".wpcookie-slide");
var dots = slider.querySelectorAll(".wp-dot");
var index = 0;

slider.addEventListener("click", e => {if(e.target.classList.contains("wpcookie-left-arrow")) { prevSlide(-1)} } )
slider.addEventListener("click", e => {if(e.target.classList.contains("wpcookie-right-arrow")) { nextSlide(1)} } )
function prevSlide(n){
  index+=n;
  console.log("prevSlide is called");
  changeSlide();
}
function nextSlide(n){
  index+=n;
  changeSlide();
}
changeSlide();
function changeSlide(){   
  if(index>slides.length-1)
    index=0;  
  if(index<0)
    index=slides.length-1;  
    for(let i=0;i<slides.length;i++){
      slides[i].style.display = "none";
      dots[i].classList.remove("wpcookie-slider-active");      
    }
    slides[index].style.display = "block";
    dots[index].classList.add("wpcookie-slider-active");
}
 } )

解决方案 #

要实现单图时隐藏按钮，需修改JS代码中生成幻灯片结构的逻辑，根据图片数量决定是否渲染箭头按钮：

1. 移除无效的全局箭头控制代码：原代码中通过document.querySelector选中的是全局第一个箭头，而非当前滑块的箭头，逻辑错误，直接删除这段代码。

2. 根据图片数量动态生成箭头HTML：在构建最终幻灯片结构前，判断图片数量，仅当数量大于1时才添加箭头按钮。

修改后的完整JS代码：

document.querySelectorAll(".wp-block-gallery")?.forEach( slider => {
    var src = [];
    var alt = [];
    var img = slider.querySelectorAll("img");
    
    img.forEach( e => { src.push(e.src);   if (e.alt) { alt.push(e.alt); } else { alt.push("image"); } })
    let i = 0;
    let image = "";
    let myDot = "";
    src.forEach ( e => { image = image + `<div class="wpcookie-slide" > <img decoding="async" loading="lazy" src="${src[i]}" alt="${alt[i]}" > </div>`; i++ })
    i = 0;
    src.forEach ( e => { myDot = myDot + `<span class="wp-dot"></span>`; i++ })
    let dotDisply = "none";
    if (slider.classList.contains("dot")) dotDisply = "block";    

    // 根据图片数量决定是否渲染箭头
    let arrowHTML = '';
    if (src.length > 1) {
      arrowHTML = `<span class="wpcookie-controls wpcookie-left-arrow"  > << Prev </span> <span class="wpcookie-controls wpcookie-right-arrow" > Next >> </span>`;
    }
    
    const main = `<div class="wp-block-gallery">${image}${arrowHTML} <div class="dots-con" style="display: ${dotDisply}"> ${myDot}</div></div> `       
    slider.insertAdjacentHTML("afterend",main  );
    slider.remove();
})

document.querySelectorAll(".wp-block-gallery")?.forEach( slider => { 
var slides = slider.querySelectorAll(".wpcookie-slide");
var dots = slider.querySelectorAll(".wp-dot");
var index = 0;

slider.addEventListener("click", e => {if(e.target.classList.contains("wpcookie-left-arrow")) { prevSlide(-1)} } )
slider.addEventListener("click", e => {if(e.target.classList.contains("wpcookie-right-arrow")) { nextSlide(1)} } )
function prevSlide(n){
  index+=n;
  console.log("prevSlide is called");
  changeSlide();
}
function nextSlide(n){
  index+=n;
  changeSlide();
}
changeSlide();
function changeSlide(){   
  if(index>slides.length-1)
    index=0;  
  if(index<0)
    index=slides.length-1;  
    for(let i=0;i<slides.length;i++){
      slides[i].style.display = "none";
      dots[i].classList.remove("wpcookie-slider-active");      
    }
    slides[index].style.display = "block";
    dots[index].classList.add("wpcookie-slider-active");
}
 } )

修改后，当幻灯片只有1张图片时，箭头按钮不会被渲染，自然不会显示，解决了单图场景下的用户体验问题。

内容的提问来源于stack exchange，提问作者user3362364