Simple Automatic Image/Video Slideshow Plugin For jQuery
File Size: | 21.4 KB |
---|---|
Views Total: | 8788 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jquery.slideshow.js is a simple-to-use jQuery plugin used to present images and iframe embedded videos (e.g. Youtube videos) in an automatic, cross-fading slideshow interface.
More features:
- Next/prev navigation buttons.
- Play/Pause buttons to stop and resume the autoplay.
- Custom text descriptions for each slide.
- Carousel-like Infinite loop.
- Custom animation speed and transition delay.
How to use it:
1. Include the JavaScript file jquery.slideshow.js
before the closing body tag and the style sheet jquery-slideshow.css
in the head
section of your webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <link href="dist/jquery-slideshow.css"rel="stylesheet"> <script src="dist/jquery.slideshow.js"></script>
2. Add images, videos and descriptions to the slideshow.
<div id="SlideShow"> <!-- Slide Images --> <img src="https://unsplash.it/753/480?image=639" class="slideobject" title="#slide1"/> <img src="https://unsplash.it/753/480?image=652" class="slideobject" /> <img src="https://unsplash.it/753/480?image=660" class="slideobject" /> <div class="slideobject"> <iframe width="100%" height="100%" src="http://www.youtube.com/embed/NAIIQvhKCuQ" frameborder="0" allowfullscreen></iframe> </div> <!-- Descriptions for Slides --> <div id="slide1" class="caption">This is the description for the first slide. <a href="#">Example of a link.</a></div> </div>
3. Call the function on the top container to render a default slideshow on the webpage.
$('#SlideShow').SlideShow();
4. Change the default animation speed & transition delay.
$('#SlideShow').SlideShow({ slideDuration: '5000', transition: 'none', transSpeed: '500' });
5. Disable the carousel mode.
$('#SlideShow').SlideShow({ loop: false });
6. Disable the description bar.
$('#SlideShow').SlideShow({ infobar: false });
This awesome jQuery plugin is developed by RobertGrubb. For more Advanced Usages, please check the demo page or visit the official website.