Jump to content

Narcis Velicescu

Members
  • Content count

    3
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Narcis Velicescu

  • Rank
    Newbie
  1. JavaScript Slideshow - hide prev for first image and next for last image

    Thank you so much, that did the trick!! The code below does exactly what is desired: if (slideIndex >= slides.length) { document.getElementsByClassName("next")[0].style.display = "none"; } else { document.getElementsByClassName("next")[0].style.display = "inline"; } if (slideIndex <= 1) { document.getElementsByClassName("prev")[0].style.display = "none"; } else { document.getElementsByClassName("prev")[0].style.display = "inline"; }
  2. JavaScript Slideshow - hide prev for first image and next for last image

    Thank you for the quick reply. Not knowing how to code, I did some research based on your suggestion and came up with the following replacements for the fourth and fifth lines in showSlides. However, the prev and next buttons still show up. if (slideIndex > slides.length) { document.getElementByClassName("next").style.display = "block"; } if (slideIndex < 1) { document.getElementByClassName("prev").style.display = "none" } the CSS is where the priv and next classes are defined: /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
  3. Hello, I've been adapting the code from the Slideshow how-to (https://www.w3schools.com/howto/howto_js_slideshow.asp) for my site. However, I would like for the previous arrow to be hidden in the first image and for the next arrow to be hidden in the last image. In other words, no looping. This is for the manual slideshow. I'm not a coding expert, I adapt already existing code, so I'm not sure where to begin. Thank you! The JavaScript from the how-to page is: var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";}
×