<h1>Infinite Slideshow</h1>
	<h2>with jQuery</h2>
	<div class="slideshow slideshow1">  
    	<ul>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img1.jpg" alt="jQuery" width="350" height="200" /></li>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li>
    	</ul>  
	</div>

	<h3>jQuery part of code</h3>
	<pre><code>$(function(){
   setInterval(function(){
      $(".slideshow ul").animate({marginLeft:-350},800,function(){
         $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
   }, 3500);
});</code></pre>


<h2>Mouse Over variation</h2>

<p>Put your mouse over this slideshow to stop animation</p>
<div class="slideshow slideshow2">  
    	<ul>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img1.jpg" alt="jQuery" width="350" height="200" /></li>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li>
    		<li><img src="http://www.creativejuiz.fr/blog/doc/infinite-slideshow/img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li>
    	</ul>  
	</div>


<pre><code>$(function(){
  var timeSlide;
  function goSlide() {
      $(".slideshow2 ul").animate({marginLeft:-350},800,function(){
        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
  }
  timeSlide = setInterval(goSlide, 3500);
  
  $('.slideshow2').on('mouseenter', function(){
    // stop animation
    clearInterval(timeSlide);
  }).on('mouseleave', function(){
    // play animation
    timeSlide = setInterval(goSlide, 3500);
  });
});</code></pre>

	/* slideshow styles */
	.slideshow {  
       width: 350px;  
       height: 200px;  
       margin: 3em auto;
       overflow: hidden;
       border: 3px solid #f2f2f2;
    }  
    .slideshow ul {  
       width: 400%;  
       height: 200px;
       padding:0; margin:0;
       list-style:none;
    }  
    .slideshow li { float: left; }



/* page styles */
body {
		color: #777;
	}
	h1, h2, a, p {
		display: block;
		margin: 1.5em 0;
		letter-spacing: 0.025em;
		word-spacing: 0.1em;
		font-family: "Segoe WP", "Segoe UI", Helvetica, Arial, sans-serif;
		font-weight: normal;
		color: #888;
		text-align:center;
	}
	h1 { margin-bottom:0; }
	h2 {margin-top: 0; }
	h3 { 
		max-width: 605px;
		margin: 0 auto;
	}

	pre { 
		max-width: 605px;
		padding: 10px;
		margin: 0.6em auto 3em;
		border: 3px solid #f2f2f2;
		background: #fff;
		overflow: auto;
		line-height: 1.4em;
	}
	code {
		font-family: "Consolas", "Courier", "Courier New", monospace;
	}

$(function(){
   setInterval(function(){
      $(".slideshow1 ul").animate({marginLeft:-350},800,function(){
         $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
   }, 3500);
});


// controls the animation with mouse over
$(function(){
  var timeSlide;
  function goSlide() {
      $(".slideshow2 ul").animate({marginLeft:-350},800,function(){
        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
  }
  timeSlide = setInterval(goSlide, 3500);
  
  $('.slideshow2').on('mouseenter', function(){
    // stop animation
    clearInterval(timeSlide);
  }).on('mouseleave', function(){
    // play animation
    timeSlide = setInterval(goSlide, 3500);
  });
});