title: Content slider with 3 slides
body: <p>I'm creating a custom content slider using jQuery. Please see the fiddle <a href="http://jsfiddle.net/isuru_nan/BwD6f/3/" rel="nofollow">here</a> for a working example. In this example, I have only 2 slides. When clicked upon the green button the slides to the next one.</p>
  
  <p>I want to add more slides to this and have the button click to slide to each of them (no previous button). The current jQuery function has the <code>id</code> of the next div hard-coded. Now when I add more slides, this method won't be effective. I don't know how to write one function to say, detect the current div you're in and when clicked next, go to the next one. How can I achieve this?</p>
  
  <p>Thank you. </p>
  
  <p>I have posted the code below.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main-slider-space"&gt;
      &lt;div class="slider-wrapper"&gt;
  
          &lt;div id="slide1" class="main-slide"&gt;
  
          &lt;/div&gt;&lt;!-- end of slide1 --&gt;   
  
          &lt;div id="slide2" class="main-slide"&gt;
  
          &lt;/div&gt;&lt;!-- end of slide2 --&gt;   
  
      &lt;/div&gt; &lt;!-- end of slider-wrapper --&gt;   
  &lt;/div&gt;&lt;!-- end of main-slider-space --&gt;
  
  &lt;div id="main-slider-next" class="slider-buttons"&gt;&lt;a class="active" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main-slider-space {
      overflow:hidden;
      width:600px;
      height:300px;
      background-color:#C36;
      margin-left:50px;
  }
  
  .slider-wrapper {
      position:relative;
      left:0;
      width:3000px;
      height:100%;
  }
  
  .main-slide {
      width:600px;
      height:100%;
      float:left;
  }
  
  #slide1 { background-color:#5FF; }
  #slide2 { background-color:#F5F; }
  
  .slider-buttons {
      position:absolute;
      width:30px;
      height:30px;
  }
  
  .slider-buttons:hover { cursor:pointer; }
  
  #main-slider-next {
      background-color:#99CC66;
      right:30px;
      top:50%;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>function goto(id, t){
      $(".slider-wrapper").animate({"left": -($(id).position().left)}, 600);
  }
  
  $(document).ready(function(e) {
     $('#main-slider-next').click(function(e) {
          e.preventDefault();
          goto('#slide2', this);
          return false;
      }); 
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/isuru_nan/BwD6f/3/" rel="nofollow">Fiddle</a></p>