Slideshow Demo

Add a javascript slideshow to your page. This example uses SlidesJS (3.0.4) and jQuery (1.9.1)

Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/ Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/ Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/ Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/
  1. Add the html content (to the body section)
    <div class="container">
    	<div id="slides">
    	  <img src="images/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
    	  <img src="images/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
    	  <img src="images/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
    	  <img src="images/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
    	  
    	  <!-- Navigation between slides -->
    	  <a href="#" class="slidesjs-previous slidesjs-navigation"></a>
    	  <a href="#" class="slidesjs-next slidesjs-navigation"></a>
    	</div>
    </div>
  2. Link jQuery and SlideJS javascript files. (Add to the head section)
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.slides.js" type="text/javascript"></script>
  3. Link the CSS (you can customize the look of the slideshow within)
    <link href="css/slideshow.css" rel="stylesheet" type="text/css"></link>
  4. Activate slideshow by adding javascript
    <script type="text/javascript">
    	$(function() {
    		$('#slides').slidesjs({
    			navigation: false,
    			play: {
    				active: false,
    				interval: 3000,
    				restartDelay: 2500,
    				pauseOnHover: true,
    				auto: true
    			}
    		});
    	});
    </script>