Easy Customizable jQuery Slideshow Plugin - GSlideShow

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.

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

<div id="demo" class="GSlideShow">
  <img src="1.jpg" title="Image 1">
  <img src="2.jpg" title="Image 2">
  <img src="3.jpg" title="Image 3">
</div>

3. Include jQuery library and the jQuery GSlideShow plugin at the bottom of the document to improve the page load speed.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="GSlideShow.js"></script>

4. Initialize the slideshow plugin with default options.

$("#demo").GSlideShow();

5. Setup your slideshow by passing the following options as an object to the GSlideShow() method.

$("#demo").GSlideShow({

  // Slideshow's menu options
  automaticSlide:true,
  showButtons:true,
  showTitle:true,

  // NavBar options
  enableNavBar:true,

  // width of the slideshow
  width:800,

  // height of the slideshow
  height:400,

  navBarLines:1,

  // animation duration
  effectDuration:800,

  // animation delay
  slideTick:5000,

  // custom styles
  borderColor:"rgba(0,0,0,1)",
  buttonColor:"rgba(0,0,0,0.5)",
  buttonBorderColor:"rgba(0,0,0,0.5)",
  textColor:"#FFFFFF",
  slideshowBorderWidth:1,
  buttonBorderWidth:1,
  borderRoundedRadius:0,
  buttonRoundedRadius:0,
  navBarRoundedRadius:5,
  navBarContentRoundedRadius:0,

  // text for previous button
  previousText:"<",

  // text for next button
  nextText:">",
  
});

Change log:

2015-11-03

• Massive update

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.