CODEWITHSUNDEEP
javascripthtmlslider
user3835174
user3835174

Reputation:

Simple JavaScript slider not functioning correctly

I'm trying to create a simple JavaScript content slider, the principle is I stack all the divs on top of each other and when I click next or previous one of them become visible and the rest hidden. Sadly I was only able to get the next button barely working, it's supposed to loop but when it gets to the last div it gets stuck, and the previous button doesn't work at all.

These are the parts I suspect are causing the problem

// Next & Previous
  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 < nrSlide; i++)
    {
      vect[i] = document.getElementById("slide" + (i+1));
    }
  }
  function next(){
    nrShown++;
    if(nrShown == nrSlide)
      nrSlide=0;
      Effect();
    }
    function prev(){
      nrShown--;
      if(nrShown == -1)
        nrSlide= nrSlide -1;
        Effect();
      }
  // Effect
  function Effect(){
    for (var i=0; i < nrSlide; i++){
      vect[i].style.opacity = "0";
      vect[i].style.visibility = "hidden";
    }
    vect[nrShown].style.opacity = "1";
    vect[nrShown].style.visibility = "visible";
  }


  <div class="prev">
    <input type="button" value="previous" onClick="prev();"
  </div>
  <div class="next">
    <input type="button" value="next" onClick="next();"
  </div>

This is the full script, excluding the css since i'm sure the problem is not in it. Also please ignore the other javascript (fence1-2-3) I know it's horrible and all but my problem now is in the next and previous 

<?DOCTYPE html>
<html>
<head>
  <title> Module </title>
  <link rel="stylesheet" href="st2.css">
  <script>
  // Fence 1
  var fence1 = new Array(5);
  fence1[0] = new Image;
  fence1[0].src = "img/fence1/fence02.jpg";
  fence1[1] = new Image;
  fence1[1].src = "img/fence1/fence03.jpg";
  fence1[2] = new Image;
  fence1[2].src = "img/fence1/fence04.jpg";
  fence1[3] = new Image;
  fence1[3].src = "img/fence1/fence05.jpg";
  fence1[4] = new Image;
  fence1[4].src = "img/fence1/fence10.jpg";
  fence1[5] = new Image;
  fence1[5].src = "img/fence1/fence12.jpg";
  function fence10(){
    document.slide.src = fence1[0].src;
  }
  function fence11(){
    document.slide.src = fence1[1].src;
  }
  function fence12(){
    document.slide.src = fence1[2].src;
  }
  function fence13(){
    document.slide.src = fence1[3].src;
  }
  function fence14(){
    document.slide.src = fence1[4].src;
  }
  function fence15(){
    document.slide.src = fence1[5].src;
  }
  // Fence 2
  var fence2 = new Array(5);
  fence2[0] = new Image;
  fence2[0].src = "img/fence2/fence02.jpg";
  fence2[1] = new Image;
  fence2[1].src = "img/fence2/fence03.jpg";
  fence2[2] = new Image;
  fence2[2].src = "img/fence2/fence04.jpg";
  fence2[3] = new Image;
  fence2[3].src = "img/fence2/fence05.jpg";
  fence2[4] = new Image;
  fence2[4].src = "img/fence2/fence10.jpg";
  fence2[5] = new Image;
  fence2[5].src = "img/fence2/fence12.jpg";
  function fence20(){
    document.slide.src = fence2[0].src;
  }
  function fence21(){
    document.slide.src = fence2[1].src;
  }
  function fence22(){
    document.slide.src = fence2[2].src;
  }
  function fence23(){
    document.slide.src = fence2[3].src;
  }
  function fence24(){
    document.slide.src = fence2[4].src;
  }
  function fence25(){
    document.slide.src = fence2[5].src;
  }
  // Fence 3
  var fence3 = new Array(5);
  fence3[0] = new Image;
  fence3[0].src = "img/fence3/fence02.jpg";
  fence3[1] = new Image;
  fence3[1].src = "img/fence3/fence03.jpg";
  fence3[2] = new Image;
  fence3[2].src = "img/fence3/fence04.jpg";
  fence3[3] = new Image;
  fence3[3].src = "img/fence3/fence05.jpg";
  fence3[4] = new Image;
  fence3[4].src = "img/fence3/fence10.jpg";
  fence3[5] = new Image;
  fence3[5].src = "img/fence3/fence12.jpg";
  function fence30(){
    document.slide.src = fence3[0].src;
  }
  function fence31(){
    document.slide.src = fence3[1].src;
  }
  function fence32(){
    document.slide.src = fence3[2].src;
  }
  function fence33(){
    document.slide.src = fence3[3].src;
  }
  function fence34(){
    document.slide.src = fence3[4].src;
  }
  function fence35(){
    document.slide.src = fence3[5].src;
  }
  // Next & Previous
  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 < nrSlide; i++)
    {
      vect[i] = document.getElementById("slide" + (i+1));
    }
  }
  function next(){
    nrShown++;
    if(nrShown == nrSlide)
      nrSlide=0;
      Effect();
    }
    function prev(){
      nrShown--;
      if(nrShown == -1)
        nrSlide= nrSlide -1;
        Effect();
      }
  // Effect
  function Effect(){
    for (var i=0; i < nrSlide; i++){
      vect[i].style.opacity = "0";
      vect[i].style.visibility = "hidden";
    }
    vect[nrShown].style.opacity = "1";
    vect[nrShown].style.visibility = "visible";
  }


  </script>
</head>
<body onload="Load()">
  <div class="container">
    <div class="slider">
      <!-- First slide -->
      <div class="slides" id="slide1">
        <div class="menu-i">
          <div class="info">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl</p>
          </div>
        </div>
        <div class="menu">
          <div class="opt">
            <ul>
              <li>
                <input type="button" class="btn f1" onClick="fence10();">
              </li>
              <li>
                <input type="button" class="btn f2" onClick="fence11();">
              </li>
              <li>
                <input type="button" class="btn f3" onClick="fence12();">
              </li>
              <li>
                <input type="button" class="btn f4" onClick="fence13();">
              </li>
              <li>
                <input type="button" class="btn f5" onClick="fence14();">
              </li>
              <li>
                <input type="button" class="btn f6" onClick="fence15();">
              </li>
          </div>
        </div>
        <img src="img/fence1/fence02.jpg" name="slide">
      </div>
      <!-- Second slide -->
      <div class="slides" id="slide2">
        <div class="menu-i">
          <div class="info">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl</p>
          </div>
        </div>
        <div class="menu">
          <div class="opt">
            <ul>
              <li>
                <input type="button" class="btn f1" onClick="fence20();">
              </li>
              <li>
                <input type="button" class="btn f2" onClick="fence21();">
              </li>
              <li>
                <input type="button" class="btn f3" onClick="fence22();">
              </li>
              <li>
                <input type="button" class="btn f4" onClick="fence23();">
              </li>
              <li>
                <input type="button" class="btn f5" onClick="fence24();">
              </li>
              <li>
                <input type="button" class="btn f6" onClick="fence25();">
              </li>
            </div>
          </div>
          <img src="img/fence2/fence02.jpg" name="slide">
        </div>
        <!-- Third slider -->
        <div class="slides" id="slide3">
          <div class="menu-i">
            <div class="info">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl</p>
            </div>
          </div>
          <div class="menu">
            <div class="opt">
              <ul>
                <li>
                  <input type="button" class="btn f1" onClick="fence30();">
                </li>
                <li>
                  <input type="button" class="btn f2" onClick="fence31();">
                </li>
                <li>
                  <input type="button" class="btn f3" onClick="fence32();">
                </li>
                <li>
                  <input type="button" class="btn f4" onClick="fence33();">
                </li>
                <li>
                  <input type="button" class="btn f5" onClick="fence34();">
                </li>
                <li>
                  <input type="button" class="btn f6" onClick="fence35();">
                </li>
              </div>
            </div>
            <img src="img/fence1/fence04.jpg" name="slide">
          </div>
      </div>
    </div>

    <!-- Next & previous -->
    <div class="ctrl">
      <div class="prev">
        <input type="button" value="previous" onClick="prev();"
      </div>
      <div class="next">
        <input type="button" value="next" onClick="next();"
      </div>
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 1

Views: 67

Answers (1)

Jonathan
Jonathan

Reputation: 6537

I'm going out on a limb because I haven't read all the way through your code. Since it's a little long for a comment, try this:

function next(){
  nrShown++;
  if(nrShown == nrSlide) {
    nrShown=0; // Instead of nrSlide
  }
  Effect();
}
function prev(){
  nrShown--;
  if(nrShown == -1) {
    nrShown = nrSlide -1; // Instead of nrSlide
  }
  Effect();
}

Upvotes: 2

Related Questions