jquery 检测并删除上一个/下一个箭头，如果有一个以上的图像

uklbhaso 于 12个月前发布在 jQuery

关注(0)|答案(3)|浏览(150)

这是一个幻灯片HTML，由3个图像生成，显示的是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>

字符串
我想隐藏<< Prev和Next >>按钮时，只有1张图片的幻灯片。它创建了一个坏的用户体验，为用户显示箭头时，只有1张图片的幻灯片。
下面是生成幻灯片的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");
}
 } )

型

jquery

来源：https://stackoverflow.com/questions/77668026/detect-and-remove-prev-next-arrows-if-theres-more-than-one-image

3条答案

按热度按时间

bfrts1fy1#

我不完全确定你想用你的滑块实现什么。但是你实现它的方式对我来说看起来太复杂了。这里是一个简短的片段，证明了当前页面上任何数量的画廊的一些基本功能。对于任何包含少于2张图片的画廊，“上一页”和“下一页”按钮将被隐藏。

document.querySelectorAll(".wp-block-gallery").forEach(gal => {
  const pics = gal.querySelectorAll("div"), n=pics.length;
  let current = 0;
  const show = inc => {
    current = (current+n+inc)%n;
    pics.forEach((p, i) => p.style.display = current == i ? "" : "none");
  }
  gal.addEventListener("click", ev => ev.target.dataset.inc && show(+ev.target.dataset.inc));
  if (n<=1) gal.querySelectorAll(".wpcookie-controls").forEach(el=>el.style.display="none")
  show(0);
})

.wpcookie-controls {cursor:pointer}

<h2>Gallery 1</h2>
<div class="wp-block-gallery">
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/100/300/200" alt="image"> 
    </div>
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/102/300/200" alt="image"> 
    </div>
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/103/300/200" alt="image">
    </div>
    <span class="wpcookie-controls" data-inc="-1"> << Prev </span> 
    <span class="wpcookie-controls" data-inc="1"> Next >> </span> 
</div>
<h2>Gallery 2 (one picture only)</h2>
<div class="wp-block-gallery">
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/104/300/200" alt="image"> 
    </div>
    <span class="wpcookie-controls" data-inc="-1"> << Prev </span> 
    <span class="wpcookie-controls" data-inc="1"> Next >> </span>     
</div>
<h2>Gallery 3</h2>
<div class="wp-block-gallery">
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/108/300/200" alt="image"> 
    </div>
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/106/300/200" alt="image"> 
    </div>
    <div class="wpcookie-slide"> 
        <img decoding="async" loading="lazy" src="https://picsum.photos/id/107/300/200" alt="image">
    </div>
    <span class="wpcookie-controls" data-inc="-1"> << Prev </span> 
    <span class="wpcookie-controls" data-inc="1"> Next >> </span> 
</div>

我在每个gallery（gal）上使用了 delegated event handling。然而，添加的“click”事件只会在被点击元素存在data-inc属性时导致一个动作。在这种情况下，该属性的值（ev.target.dataset.inc）将被解释为要添加到current（=“to be shown”）索引的增量。

赞(0）回复(0）举报 12个月前

wfauudbj2#

假设您的HTML符合您的特定情况，则CSS可以达到此目的;下面的代码中有解释性注解：

/* generic reset, and removal of (some) browser defaults */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ensuring the <HTML> element takes all availble space on
   the block (vertical, in most European languages) axis: */
html {
  block-size: 100%;
}

/* setting the <body> to take all of the dynamic viewport
   block size (1dvb is equivalent to 1vh or 1% of the
   vertical space, in left-to-right, top-to-bottom languages): */
body {
  block-size: 100dvb;
}

main {
  /* setting the size of the <main> element along its inline-
     axis to 80dvi (dynamic viewport inline size), with an
     absolute minimum size of 20rem and maximum size of 1200px: */
  inline-size: clamp(20rem, 80dvi, 1200px);
  /* margin auto on the inline axis: */
  margin-inline: auto;
}

.wp-block-gallery {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.wpcookie-controls {
  align-self: stretch;
  background-color: lavenderblush;
  display: grid;
  cursor: pointer;
  /* I've made this partially transparent for purposes of the
     demo, but in production "opacity: 0" or "display: none"
     may be preferable: */
  opacity: 0.4;
  padding: 0.5rem;
  place-content: center;
}

.wpcookie-left-arrow {
  border-radius: 1rem 0 0 1rem;
  /* moving the element to the first position of the layout order,
     without rearranging the DOM: */
  order: -1;
}

.wpcookie-right-arrow {
  border-radius: 0 1rem 1rem 0;
}

/* here we're selecting all .wpcookie-controls elements that follow
   a .wpcookie-slide element tha itself follows a previous
   .wpcookie-slide element, using the general sibling combinator
   (the '~' character, the 'tilde'): */
.wpcookie-slide ~ .wpcookie-slide ~ .wpcookie-controls {
  opacity: 1;
}

个字符
JS Fiddle demo的一个。
参考文献：