How do I get the buttons to stop at first and last image

Question

Hope I am not breaking Stack Overflow protocol or etiquette here.
I am reposting this solution from another question that was posted.

Original Question: show-and-hide-images-with-next-previous-button-using-javascript
Asked by: user1199537
Prefered solution given by: bunjerd-sparrow

This code works great, but I need it to stop at image 1 (using previous button) and stop at image 11 (using next button), not continuously roll through the images.

I am sure this is light work for you guys. I just can't figure it out to save my life. Any and all help is greatly appreciated.

 var $c = 0;

 function next() {
   var boxes = document.getElementsByClassName("box");
   $c += 1;
   if ($c >= boxes.length) $c = 0;
   for (var $i = 0; $i < boxes.length; $i++) {
     boxes[$i].style.display = "none";
   }
   boxes[$c].style.display = "block";
   return false;
 }

 function prev() {
   var boxes = document.getElementsByClassName("box");
   $c -= 1;
   if ($c < 0) $c = (boxes.length - 1);
   for (var $i = 0; $i < boxes.length; $i++) {
     boxes[$i].style.display = "none";
   }
   boxes[$c].style.display = "block";
   return false;
 }

    #container {
      position: relative;
      width: 120px;
      height: 120px;
    }
    #container div {
      position: absolute;
      width: 120px;
      height: 120px;
    }
    #box-red {
      background: red;
    }
    #box-yellow {
      background: yellow;
      display: none;
    }
    #box-green {
      background: green;
      display: none;
    }
    #box-maroon {
      background: maroon;
      display: none;
    }

<div id="container">
  <div id="box-red" class="box">DIV1</div>
  <div id="box-yellow" class="box">DIV2</div>
  <div id="box-green" class="box">DIV3</div>
  <div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>

mplungjan · Accepted Answer · 2015-11-05T17:18:53.247

Change

if ($c < 0) $c = (boxes.length - 1);

to not wrap:

if ($c < 0) $c=0;

and

if ($c >= boxes.length) $c = 0;

to not wrap

if ($c >= boxes.length) $c = boxes.length-1;

var $c = 0;

function next() {
  var boxes = document.getElementsByClassName("box");
  $c += 1;
  if ($c >= boxes.length) $c = boxes.length - 1;
  for (var $i = 0; $i < boxes.length; $i++) {
    boxes[$i].style.display = "none";
  }
  boxes[$c].style.display = "block";
  return false;
}

function prev() {
  var boxes = document.getElementsByClassName("box");
  $c -= 1;
  if ($c < 0) $c = 0;
  for (var $i = 0; $i < boxes.length; $i++) {
    boxes[$i].style.display = "none";
  }
  boxes[$c].style.display = "block";
  return false;
}

#container {
  position: relative;
  width: 120px;
  height: 120px;
}
#container div {
  position: absolute;
  width: 120px;
  height: 120px;
}
#box-red {
  background: red;
}
#box-yellow {
  background: yellow;
  display: none;
}
#box-green {
  background: green;
  display: none;
}
#box-maroon {
  background: maroon;
  display: none;
}

<div id="container">
  <div id="box-one" class="box">10</div>
  <div id="box-two" class="box">9</div>
  <div id="box-three" class="box">8</div>
  <div id="box-four" class="box">7</div>
  <div id="box-five" class="box">6</div>
  <div id="box-six" class="box">5</div>
  <div id="box-seven" class="box">4</div>
  <div id="box-eight" class="box">3</div>
  <div id="box-nine" class="box">2</div>
  <div id="box-ten" class="box">1</div>
  <div id="box-nothing" class="box">0</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>

Sorry @mplungjan I ran into a problem when adding additional images and trying to run them in sequence. — YourWebGirl, Nov 05 '15 at 16:55
The CSS was causing the sequence error. display:none; should not be on the first div. but it should be on the following divs in the CSS. Then the divs should be placed in the order you want in the HTML. So the error was not yours. Sorry about that!! — YourWebGirl, Nov 05 '15 at 17:33

score 0 · Answer 2 · answered Nov 05 '15 at 16:08

Just don't run the code to show a new box and increase/decrease the counter when hitting the first or last image.

if ($c < boxes.length - 1) {
    // Do logic
}

and

if ($c > 0) {
    // Do logic
}

Example

 var $c = 0;

 function next() {
   var boxes = document.getElementsByClassName("box");
   if ($c < boxes.length - 1) {
     $c += 1;
     for (var $i = 0; $i < boxes.length; $i++) {
       boxes[$i].style.display = "none";
     }
     boxes[$c].style.display = "block";
   }
   return false;
 }

 function prev() {
   var boxes = document.getElementsByClassName("box");
   if ($c > 0) {
     $c -= 1;
     for (var $i = 0; $i < boxes.length; $i++) {
       boxes[$i].style.display = "none";
     }
     boxes[$c].style.display = "block";
   }
   return false;
 }

    #container {
      position: relative;
      width: 120px;
      height: 120px;
    }
    #container div {
      position: absolute;
      width: 120px;
      height: 120px;
    }
    #box-red {
      background: red;
    }
    #box-yellow {
      background: yellow;
      display: none;
    }
    #box-green {
      background: green;
      display: none;
    }
    #box-maroon {
      background: maroon;
      display: none;
    }

<div id="container">
  <div id="box-red" class="box">DIV1</div>
  <div id="box-yellow" class="box">DIV2</div>
  <div id="box-green" class="box">DIV3</div>
  <div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>

This turned out to be the better solution when needing image in a specific sequence. — YourWebGirl, Nov 05 '15 at 16:57
Also, it won't execute the next/prev code when on the first or last image, and thus is slightly better for performance, and just overall best practice. — Gerrit Bertier, Nov 06 '15 at 08:30

How do I get the buttons to stop at first and last image

2 Answers2