Creating A Extremely Simple Image Slideshow Using jQuery
File Size: | 66.5KB |
---|---|
Views Total: | 1337 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An extremely simple jQuery slider plugin used to create a image slideshow with fade-in and fade-out transitions.
How to use it:
1. Create the html for the slideshow.
<div id="slideshow"> <div> <img src="img/img1.jpg"> </div> <div> <img src="img/img2.jpg"> </div> <div> <img src="img/img3.jpg"> </div> </div>
2. Include the jQuery library at the end of your document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
3. The CSS
#slideshow > div { position: absolute; top: 1px; left: 1px; }
4. The javascript.
<script> $(function() { $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 2500); }); </script>
This awesome jQuery plugin is developed by dmurana. For more Advanced Usages, please check the demo page or visit the official website.