title: How to add next/prev buttons to a slideshow
body: <p>Hyper-mega-noob-question, i've been racking my brain over how to add next/ previous buttons to a simple slider i found by Soh Tanaka and wanted to ask for your help in this endevour. So far i have gotten the slider to work with a tooltip and to load the images from an xml (per my requirement) but i'm pretty new to jQuery and can't get the next/previous buttons working :(..Here is what i got so far:</p>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin: 0; padding: 0;
      font: normal 10px Verdana, Arial, Helvetica, sans-serif;
  }
  *{outline: none;}
  img {border: 0;}
  .container {
      width: 322px;
      padding: 0;
      margin:30px 10px 0 10px;
  }
  
  /*--Main Container--*/
  .main_view {
      position: relative;
  }
  /*--Window/Masking Styles--*/
  .window {
      height:270px;   width: 320px;
      overflow: hidden; /*--Hides anything outside of the set width/height--*/
      position: relative;
  }
  .image_reel {
      position: absolute;
      top: 0; left: 0;
      z-index:1;
  }
  
  /*--Paging Styles--*/
  .paging {
      position: relative;
      width: 320px; height:35px;
      text-align: center;
      line-height: 35px;
      display: none; /*--Hidden by default, will be later shown with jQuery--*/
  }
  .paging a {
      padding: 0 2px;
      text-decoration: none;
      color: #000;
  }
  .paging a.active {
      color: #fff;
      font-weight: bold; 
      background: #920000; 
      border: 1px solid #610000;
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
      -webkit-border-radius: 3px;
  }
  .paging a:hover {font-weight: bold;}
  
  .box {
  margin:0;
  padding:0;
  display: block;
  width:318px;
  height:268px;
  float: left;
  border:1px solid #ddd;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;
  }
  
  .box h3 {
  font-size: 16px;
  text-align:center;
  white-space:wrap;
  }
  
  .box img {
  margin-left:40px;
  margin-bottom:-5px;
  }
  
  .box .slider-title {
  color: red;
  margin-bottom:4px;
  margin-top:6px;
  }
  
  .box .slider-subtitle {
  width:320px;
  float:left;
  margin-bottom:4px;
  }
  
  .box .input_Default {
  width:320px;
  display:block;
  float:left;
  text-align:center;
  }
  
  .loading {
  background: url(loading.gif) no-repeat 0 0;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 9999;
  }
  
  .subt {
  color: #fff;
  background:#1d1d1d;
  padding:10px;
  position:absolute;    
  z-index:1000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  }
  
  .moreinfo .subt { display:none; }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
  
          $.ajax({
          type: "GET",
          cache: false,
          url: "ads.xml",
          data: 'xml',
          success: function (d) {
      $(d).find('promo').each(function(){
          var $promo = $(this); 
          var title = $promo.find('title').text();
          var subtitle = $promo.find('subtitle').text();
          var image = $promo.attr('image');
          var link = $promo.attr('link');
          var index = $promo.attr('index');
  
          var ads = '&lt;div class="box"&gt;&lt;h3 class="slider-title"&gt;' + title + '&lt;/h3&gt;';
          ads += '&lt;dt&gt; &lt;a class="moreinfo" href="' + link + '" target="_blank"&gt;&lt;img alt="' + subtitle + '" src="' + image + '" /&gt;&lt;span class="subt"&gt;test sub&lt;/span&gt;&lt;/a&gt;&lt;/dt&gt;';
          //ads += '&lt;dd&gt; &lt;span class="loading" alt="Loading" /&gt;';
          ads += '&lt;h3 class="slider-subtitle"&gt;' + subtitle + '&lt;/h3&gt;' ;
          ads += '&lt;div class="input_Default"&gt;&lt;a href="' + link + '"&gt;Learn More&lt;/a&gt;&lt;/div&gt;';
          ads += '&lt;/dd&gt;&lt;/div&gt;';
  
          var pager = '&lt;a href="#" rel="' + index + '"&gt;' + index + '&lt;/a&gt;';
  
          $('.image_reel').append($(ads));
          $('.paging').append($(pager));
  
          //$('.loading').fadeOut(1400);
      });
  }
  });
  
  $('.image_reel').ajaxStop(function() {
  
      $(".paging").show();
      $(".paging a:first").addClass("active");
  
      var imageWidth = $(".window").width();
      var imageSum = $(".box").size();
      var imageReelWidth = imageWidth * imageSum;
  
      $(".image_reel").css({'width' : imageReelWidth});
  
      rotate = function(){
          var triggerID = $active.attr("rel") - 1;
          var image_reelPosition = triggerID * imageWidth;
  
          $(".paging a").removeClass('active');
          $active.addClass('active');
  
          $(".image_reel").animate({ 
              left: -image_reelPosition
          }, 800 );
      }; 
  
      rotateSwitch = function(){
          play = setInterval(function(){
              $active = $('.paging a.active').next();
              if ( $active.length === 0) {
                  $active = $('.paging a:first');
              }
              rotate();
          }, 7000);
      };
  
      rotateSwitch();
  
      $(".image_reel a").hover(function() {
          clearInterval(play);
      }, function() {
          rotateSwitch();
      }); 
  
      $(".paging a").click(function() {   
          $active = $(this);
  
          clearInterval(play);
          rotate();
          rotateSwitch();
          return false;
      });
  
      $(".next a").click(function() {
          $active = $('.paging a.active').parent().next().find('a');
          if ( $active.length === 0) { //If paging reaches the end…
          $active = $('.paging a:first'); //go back to first
      }
  
          clearInterval(play); //Stop the rotation
          rotate(); //Trigger rotation immediately
          rotateSwitch(); // Resume rotation
          return false; //Prevent browser jump to link anchor
      });
  
      $(".prev a").click(function() {
          $active = $('.paging a.active').prev();
          if ( $active.length === 0) { //If paging reaches the end…
          $active = $('.paging a:first'); //go back to first
      }
          clearInterval(play); //Stop the rotation
          rotate(); //Trigger rotation immediately
          rotateSwitch(); // Resume rotation
          return false; //Prevent browser jump to link anchor
      });
  
      $('.moreinfo').each(function() {
          var subt = $(this).find('.subt');
          $(this).hover(
              function() { subt.appendTo('body'); },
              function() { subt.appendTo(this); }
          ).mousemove(function(e) {
              var x = e.pageX + 20,
                  y = e.pageY + 20,
                  w = subt.width(),
                  h = subt.height(),
                  dx = $(window).width() - (x + w),
                  dy = $(window).height() - (y + h);
  
              if ( dx &lt; 20 ) x = e.pageX - w - 20;
              if ( dy &lt; 20 ) y = e.pageY - h - 20;
  
              subt.css({ left: x, top: y });
          });         
      });
  
  });
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="window"&gt;    
                  &lt;div class="image_reel"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="paging"&gt;
  &lt;a rel="nofollow" href="#" class="next" &gt;next&lt;/a&gt;
  &lt;a href="#" class="next" &gt;next&lt;/a&gt;
  &lt;a href="#" class="prev" rel="nofollow" &gt;previous&lt;/a&gt;
              &lt;/div&gt;
  &lt;a rel="nofollow" href="#" class="next" &gt;next&lt;/a&gt;
  &lt;a rel="nofollow" href="#" class="next" &gt;next&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All the images and buttons are pulled from an XML, and that works just fine but the next/prev buttons are my main issue :(.</p>
  
  <p>Here is the original, non-XML version on JSFiddle i put up for testing, <em>EDIT, original version</em> <a href="http://jsfiddle.net/scPqJ/1/" rel="nofollow">http://jsfiddle.net/scPqJ/1/</a></p>
  
  <p>Can one of you ninjas out there show me the right direction?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>for any future generation looking for a solution, a user in sohtanaka.com comments helped me out and got it working, here is the JsFiddle, <a href="http://jsfiddle.net/scPqJ/3/" rel="nofollow">http://jsfiddle.net/scPqJ/3/</a></p>
  
  <p>This is the Js for the buttons (you set it in the end of the original JS, before the end brackets:</p>
  
  <p>JS</p>
  
  <pre><code>$(".previous a").click(function() {    
      $active = $('.paging a.active').next();
      if ( $active.length === 0) { //If paging reaches the end...
          $active = $('.paging a:first'); //go back to first
      }
  
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
  });    
  
  
  $(".next a").click(function() {    
      $active = $('.paging a.active').prev();
      if ( $active.length === 0) { //If paging reaches the end...
          $active = $('.paging a:last'); //go back to first
      }
  
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
  }); 
  </code></pre>
  
  <p>After you set that up, all you have to do is define the next/previous divs in the html, like so:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="next"&gt;
  &lt;a href="#" &gt;next&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="previous"&gt;
  &lt;a href="#" &gt;previous&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and Voila!.</p>