title: Change slider's next and previous button to be previews of upcoming or previous pictures
body: <p>Hey so i have a slider and i need to change the next and previous button backgrounds to show a preview of the next and previous slide. I don't know if it's possible without jQuery but since i'm working on an all javascript slider i'd very much appreciate a javascript solution </p>
  
  <p>This is the HTML</p>
  
  <pre><code>&lt;body onload="Load()"
    &lt;div class="container"&gt;
      &lt;div class="slider"&gt;
        &lt;div class="slides" id="slide1"&gt;
          &lt;img src="img/1.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="slides" id="slide2"&gt;
          &lt;img src="img/2.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="slides" id="slide3"&gt;
          &lt;img src="img/3.jpg"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ctrl"&gt;
        &lt;div class="prev"&gt;
          &lt;input type="button" onClick="prev();"&gt;
        &lt;/div&gt;
        &lt;div class="next"&gt;
          &lt;input type="button" onClick="next();"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the Javascript </p>
  
  <pre><code>  nrSlide=3;
    function Load(){
      nrShown = 0;
      vect = new Array(nrSlide + 1);
      vect[0] = document.getElementById("slide1");
      vect[0].style.visibility = "visible";
      for (var i = 1; i &lt; nrSlide; i++)
      {
        vect[i] = document.getElementById("slide" + (i+1));
      }
    }
    function next(){
      nrShown++;
      if(nrShown == nrSlide) {
        nrShown=0;
      }
      Effect();
    }
    function prev(){
      nrShown--;
      if(nrShown == -1) {
        nrShown = nrSlide -1;
      }
      Effect();
    }
    // Effect
    function Effect(){
      for (var i=0; i &lt; nrSlide; i++){
        vect[i].style.opacity = "0";
        vect[i].style.visibility = "hidden";
      }
      vect[nrShown].style.opacity = "1";
      vect[nrShown].style.visibility = "visible";
    }
  </code></pre>
  
  <p>PS: I do realize that this is doable in jQuery but i need a javascript solution. And if you are going to downvot at least leave a reason </p>