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 |
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.