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
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="//"></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="" class="slideobject" title="#slide1"/>
  <img src="" class="slideobject" />
  <img src="" class="slideobject" />
  <div class="slideobject">
    <iframe width="100%" height="100%" src="" frameborder="0" allowfullscreen></iframe>
  <!-- Descriptions for Slides -->
  <div id="slide1" class="caption">This is the description for the first slide. <a href="#">Example of a link.</a></div>

3. Call the function on the top container to render a default slideshow on the webpage.


4. Change the default animation speed & transition delay.

  slideDuration: '5000',
  transition: 'none',
  transSpeed: '500'

5. Disable the carousel mode.

  loop: false

6. Disable the description bar.

  infobar: false

This awesome jQuery plugin is developed by RobertGrubb. For more Advanced Usages, please check the demo page or visit the official website.