Jump to content

JavaScript Slideshow - hide prev for first image and next for last image

Recommended Posts


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;

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";


Link to post
Share on other sites

The fourth and fifth lines in showSlides are where they check whether or not to loop.  If you compare the index with the length of the slides array then you can figure out if they're on the first or last slide, and change the display properties on the arrows to show or hide them.

Link to post
Share on other sites

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

Link to post
Share on other sites

You can have multiple elements with same class name, so it is done as document.getElementsByClassName("prev") , you also have to use a index ref which starts at 0, so it should be as

document.getElementsByClassName("prev")[0].style.display = "none"

Since you only have one of each.

You should use an if else condition for each, this is what you are trying to achieve:

if slideIndex (maybe include greater than, and) equal to slide length hide 'next', else show

if slideIndex (maybe include less than, and) equal to 1, hide 'prev' else show

Link to post
Share on other sites

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";


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...