Easy & Highly Customizable Slideshow Plugin For jQuery - glide.js

glide.js is a simple, flexible, and heavily customizable image slideshow/carousel/slider plugin that features image preloading, animated captions, pagination & keyboard navigation, auto-rotation, custom animations and much more. You can find more demos under the demos folder in the zip. Licensed under the Apache License.

How to use it:

1. Load the jQuery glide.js plugin after your jQuery JavaScript library.

<link rel="stylesheet" href="path/toglide.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="path/to/glide.js"></script>

2. Load the jQuery easing plugin if you would like to use more easing effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Add you images as slides into the slider as shown below.

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

4. Call the glide() methods on the parent container to create a basic image slider with default options.

$('#demo').glide({
  // OPTIONS
});

5. All customization options.

$('#demo').glide({

// preload slides
preload           : false,      

// image to show while slides are being loaded        
preloadImage      : 'imgs/loading.gif', 

// generate next-slide and previous-slide links
nextPrevLinks     : false,             

// generate link for each slide 
pagination        : true,     

// circle, square, diamond          
paginationStyle   : 'circle',      

// pagination position     
paginationPosition: 'center',

// horizontal, vertical 
// ignored if animation is set to fade
orientation       : 'horizontal',     

// slide, fade  
animation         : 'slide',     

// HTML class to denote custom caption class to override default caption functionality, 
// used for custom caption positioning                
customCaption     : '',           

// slide, fade      
captionAnimation  : 'slide',            

// delay caption animation (ms)
captionDelay      : 0,      

// carousel will stop on when the cursor enters it            
pauseOnHover      : false,              

// zero-based slide index
startSlide        : 0,         

// when activated, will be the amount of time each slide is active in ms, 
// 0 will deactivate autoPlay         
autoPlay          : 0,     

// fade transition speed in ms             
fadeSpeed         : 450,    

// fade easing, extend options using jquery.easing plugin            
fadeEasing        : 'swing',     

// slide transition speed            
slideSpeed        : 450,       

// slide easing, extend options using jquery.easing plugin         
slideEasing       : 'swing',  

// carousel will adjust height its for each slide               
adjustHeight      : false,  

// height transition speed            
adjustHeightSpeed : 450,      

// height adjustment easing, extend options using jquery.easing plugin          
adjustHeightEasing: 'swing',   

// class of container that holds slides              
slideContainer    : 'slider_container', 

// class of slide that is active and showing
currentClass      : 'current',        

// class applied to each pagination link  
paginationClass   : 'glide-pagination', 

// class applied to next-slide link
nextClass         : 'next',     

// class applied to previous-slide link        
prevClass         : 'prev',  

// each slide transition will make use of pushState and enter a record in the user's browser history 
// **not recommended if autoPlay > 0**           
browserHistory    : false,        

// enable navigation with arrow keys      
keyboardNav       : false,          

// experimental support for Twitter bootstrap integration    
bootstrap         : false,           

// callback function fired after carousel is initialized   
initCallback      : function(){},   

// callback function fired after slides are loaded    
loadedCallback    : function(){},       

// callback function fired before each animation
animationStart    : function(){},  

// callback function fired after each animation ends     
animationEnd      : function(){}    
    
});

---

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