This time I will share jQuery Plugin and tutorial about Easy Customizable jQuery Slideshow Plugin – GSlideShow, hope it will help you in programming stack.
GSlideShow is a lightweight and simple-to-use jQuery slideshow plugin used to showcase your favorite images in the carousel fashion.
Key features:
- Auto-rotation on initialize.
- Cross-fade effect between transitions.
- Custom prev / next navigation labels.
- Endless looping like a carousel.
- Image captions with counters.
How to use it:
1. Include the GSlideShow.css in the document’s head section that provides the basic styles for the slideshow.
1 |
<link href="GSlideShow.css" rel="stylesheet"> |
2. Simply wrap the images you want to present in a DIV container. The plugin will automatically displays image captions at the top left of the slideshow using img‘s title attribute.
1 |
<div id="demo" class="GSlideShow"> |
2 |
<img src="1.jpg" title="Image 1"> |
3 |
<img src="2.jpg" title="Image 2"> |
4 |
<img src="3.jpg" title="Image 3"> |
3. Include jQuery library and the jQuery GSlideShow plugin at the bottom of the document to improve the page load speed.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="GSlideShow.js"></script> |
4. Initialize the slideshow plugin with default options.
1 |
$("#demo").GSlideShow(); |
5. Setup your slideshow by passing the following options as an object to the GSlideShow() method.
01 |
$("#demo").GSlideShow({ |
26 |
borderColor:"rgba(0,0,0,1)", |
27 |
buttonColor:"rgba(0,0,0,0.5)", |
28 |
buttonBorderColor:"rgba(0,0,0,0.5)", |
30 |
slideshowBorderWidth:1, |
32 |
borderRoundedRadius:0, |
33 |
buttonRoundedRadius:0, |
34 |
navBarRoundedRadius:5, |
35 |
navBarContentRoundedRadius:0, |
Change log:
2015-11-03
2015-10-24
- Add a pause/play button
- Minor bug fixes.
This awesome jQuery plugin is developed by GuillaumeRives. For more Advanced Usages, please check the demo page or visit the official website.
