title: jQuery slider - last to first transition
body: <p>I created this slider (didn't want to use plugins):</p>
  
  <pre><code>function slider(sel, intr, i) {
    var _slider = this;
    this.ind = i;
    this.selector = sel;
    this.slide = [];
    this.slide_active = 0;
    this.amount;
    this.selector.children().each(function (i) {
      _slider.slide[i] = $(this);
      $(this).hide();
    })
    this.run();
  }
  slider.prototype.run = function () {
    var _s = this;
    this.slide[this.slide_active].show();
    setTimeout(function () {
      _s.slide[_s.slide_active].hide()
      _s.slide_active++;
      _s.run();
    }, interval);
  }
  var slides = [];
  var interval = 1000
  $('.slider').each(function (i) {
    slides[i] = new slider($(this), interval, i);
  })
  </code></pre>
  
  <p>The problem I have is that I don´t know how to get it after the last slide(image), it goes back to the first slide again. Right now, it just .hide and .show till the end and if there is no image it just doesn´t start again.</p>
  
  <p>Can someone help me out with <strong>a code suggestion</strong> to make it take the .length of the slider(the number of images on it) and if it is the last slide(image), then goes back to the first slide(image)... like a cycle.</p>
  
  <p><strong>Edit:</strong> Slider markup</p>
  
  <pre><code>    &lt;div class="small_box top_right slider"&gt;
          &lt;img class="fittobox" src="img/home10.jpg" alt="home10" width="854" height="592"&gt;
          &lt;img class="fittobox" src="img/home3.jpg" alt="home3" width="435" height="392"&gt;
          &lt;img class="fittobox" src="img/home4.jpg" alt="home4" width="435" height="392"&gt;
      &lt;/div&gt;
  </code></pre>