This is a slideshow HTML that’s generated with 3 images and shown are the Prev << and Next >> buttons.
<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>
I want to hide the << Prev & Next >> buttons when there’s just 1 image in the slideshow. It creates a bad UX for the users to show the arrows when there’s only 1 image in the slideshow.
Here’s the JS code that generates the slideshow:
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");
}
} )
3
Answers
To hide the "Prev" and "Next" buttons when there’s only one image in the slideshow, you can add a check in your JavaScript code to determine the number of images. If there’s only one image, you can either remove the buttons or hide them using CSS.
var singleImage = img.length === 1;
Then grab the html element and update the css.
Assuming that your HTML is accurate to your particular situation, then CSS could achieve this; explanatory comments are in the code below:
JS Fiddle demo.
References:
align-self.background-color.block-size.border-radius.box-sizing.cursor.dvb,dvi, etc).display.gap.inline-size.justify-content.margin.margin-inline.opacity.order.padding.place-content.HTML:
I am not entirely sure what you want to achieve with your slider. But the way you implemented it looks overly complicated to me. Here is a shorter snippet proving some basic functionality to any number of galleries on the current page. The "prev" and "next" buttons will be hidden for any gallery containing less than 2 pictures.
I use delegated event handling on each gallery (
gal). However, the added "click" event will only lead to an action if adata-incattribute exists for the clicked element. In that case the value of that attribute (ev.target.dataset.inc) will be interpreted as an increment to be added to thecurrent(="to be shown") index.