title: Jquery slider plugin, everything is working but the images do not change
body: <p>New to query and I'm playing around with this slider plugin, I've got it to work manually, but where the parameter is set to 'interval: true' and 'intervalTime: 100', it does not change pictures automatically. Why is this happening?</p>
  
  <p><a href="http://jsfiddle.net/3k4Y2/" rel="nofollow">http://jsfiddle.net/3k4Y2/</a></p>
  
  <p><a href="http://baijs.com/tinycircleslider/" rel="nofollow">http://baijs.com/tinycircleslider/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;title&gt;Tiny Circleslider: A lightweight cross browser circular carousel.&lt;/title&gt;
  &lt;script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"&gt;&lt;/script&gt;
      &lt;div id="rotatescroll"&gt;
          &lt;div class="viewport"&gt;
              &lt;ul class="overview"&gt;
                  &lt;li&gt;&lt;a href="http://www.baijs.nl"&gt;&lt;img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr3.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.baijs.nl"&gt;&lt;img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.baijs.nl"&gt;&lt;img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.baijs.nl"&gt;&lt;img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.baijs.nl"&gt;&lt;img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="dot"&gt;&lt;/div&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt;
          &lt;div class="thumb"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#rotatescroll { height:300px; position:relative; width:300px; }
  #rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
  #rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
  #rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
  #rotatescroll .overlay {background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
  #rotatescroll .thumb { background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }
  #rotatescroll .dot { background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
  #rotatescroll .dot span { display: none; }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function()
          {
              $('#rotatescroll').tinycircleslider({ interval: true, intervalTime: 100, dotsSnap: true });
          });
  </code></pre>