Simple Automatic Image/Video Slideshow Plugin For jQuery

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.