Minimal Image Slideshow Plugin For jQuery

File Size: 6.14 KB
Views Total: 1342
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Image Slideshow Plugin For jQuery

The Slideshow Lite jQuery plugin takes a group of images and converts them into a basic slideshow with auto-fading transitions and image captions support.

More features:

  • Cross browser.
  • Auto crops images depending on the slideshow's size.
  • Configurable transition delay & animation speed.

How to use it:

1. Add jQuery library and the Slideshow Lite plugin's JavaScript & Stylesheet in the html document.

<link rel="stylesheet" href="css/slideshow.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.slideshow.lite.js"></script>

2. Create a group of images for the slideshow.

<div id="slideshow">
  <a href="#"><img src="1.jpg" alt="Image Caption 1"></a>
  <img src="2.jpg" alt="Image Caption 2">
  <a href="https://www.jqueryscript.net"><img src="3.jpg" alt="Image Caption 3"></a>
  <img src="4.jpg" alt="Image Caption 4">
  ...
</div>

3. The JavaScript to create a default slideshow from the provided images.

$("#slideshow").slideshow();

4. Config the slideshow with the following settings.

$("#slideshow").slideshow({

  // transition delay in seconds
  pauseSeconds: 2,

  // animation speed in seconds
  fadeSpeed: 0.5,

  // width/height of the slideshow
  width: 468,
  height: 120,

  // shows image captions
  caption: true,

  // default CSS class
  cssClass: 'slideshowlite',

  // target attribute of anchor links
  anchorTarget: '_self'
  
});

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