title: JQuery + setInterval + Ajax calls
body: <p>I'm using the craftyslide jquery plugin <a href="http://projects.craftedpixelz.co.uk/craftyslide/" rel="nofollow">http://projects.craftedpixelz.co.uk/craftyslide/</a>. This plugin is used for building slideshows. My web is using ajax to load the content. In my /#home I have two slides/pictures. </p>
  
  <p>The problem that I'm getting is that this plugin is using a setInterval() function.</p>
  
  <pre><code>// Auto mode
  function auto() {
      setInterval(function () { 
      $slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");
  
                  $slides.each(function () {
                      if ($slides.is(":visible")) {
                          $(".caption").css("bottom", "-37px");
                          $(this).find(".caption").delay(300).animate({
                              bottom: 0
                          }, 300);
                      }
                  });
  
              }, options.delay);
  }
  </code></pre>
  
  <p>When I load the content in my /#home everything is working fine. But if I load another page by means of an ajax call like /#offers and after that I come back to the /#home page, the transition starts failing. I get instead of the two images, it seems that it detects 4. If I do the same process once again, it will display 6. </p>
  
  <p>As I said, I think that it is because of the setInterval function. It is still executing the setInterval from the previous called + the new ones. Is there any way to remove that setInterval() when I load another page?</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Additional info:</strong>
  As the content is loaded with Ajax, Im using a template for loading the header, footer, etc. before loading the content. That template is loading the library like this inside the HEAD:</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;TITLE&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="fragment" content="!"/&gt;
  &lt;script type="text/javascript" src="/js/ext.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/craftyslide.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>When I do the ajax call to load the #home, I'm retrieving an HTML document with some javascript. That javascript is located at the end of the HTML code.</p>
  
  <pre><code>&lt;div id="slideshow"&gt;
      &lt;ul&gt;
          &lt;li style="width:100%;"&gt;
              &lt;img src="bg.jpg" height="400"/&gt;
          &lt;/li &gt;
  
          &lt;li style="width:100%;"&gt;
              &lt;img src="kk2_bg_optimized.jpg" height="400"/&gt;
          &lt;/li&gt;                         
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt; 
      $(document).ready(function(){ 
          // Load slide 
          $("#slideshow").craftyslide({
              'width': "100%", 
              'height': 400, 
              'pagination': false, 
              'fadetime': 500, 
              'delay': 3500
          });
  });
  &lt;/script&gt; 
  </code></pre>