Highly Configurable jQuery Image Carousel Plugin - leoSlider

leoSlider is a jQuery plugin to create a heavily customizable carousel slider that slides through a list of images with a fancy transition effect.

Features:

• Tons of configuration options and API.
• Navigation and pagination.
• Autoplay.
• Custom animation types and speed.
• Allows to navigate between images with touch swipe, keyboard, and mouse wheel (requires jQuery mousewheel plugin)
• Additional easing effects. Requires jQuery easing plugin.

How to use it:

1. Load the leoslider.min.css stylesheet in the head section of the document.

<link rel="stylesheet" href="leoslider.min.css">

2. Insert your images into list items.

<div class="leoslider">
  <ul class="slides">
    <li>
      <img src="1.jpg" />
    </li>
    <li>
      <img src="2.jpg" />
    </li>
    <li>
      <img src="3.jpg" />
    </li>
  </ul>
</div>

3. Load jQuery javascript library the leoslider.min.js script at the end of the document.

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.leoslider-min.js"></script>

4. Initialize the image carousel with one JS call.

$('.leoslider').leoslider();

5. Config the image carousel with the following options.

$('.leoslider').leoslider({

  // refix string attached to the class of every element generated by the plugin
  namespace: "leo-", 

  // Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
  selector: ".slides > li",    

  // Select your animation type, "fade" or "slide"   
  animation: "fade",   

  // Determines the easing method used in jQuery transitions. 
  // jQuery easing plugin is supported!           
  easing: "swing",          

  // Select the sliding direction, "horizontal" or "vertical"      
  direction: "horizontal",   

  // Reverse the animation direction     
  reverse: false,      

  // If false, directionNav will received "disable" classes at either end           
  animationLoop: true,          

  // Allow height of the slider to animate smoothly in horizontal mode  
  smoothHeight: false,          

  // The slide that the slider should start on. Array notation (0 = first slide)  
  startAt: 0,             

  // Animate slider automatically        
  slideshow: true,     

  // Set the speed of the slideshow cycling, in milliseconds           
  slideshowSpeed: 4000,         

  // Set the speed of animations, in milliseconds  
  animationSpeed: 1500,     

  // Set an initialization delay, in milliseconds       
  initDelay: 0,          

  // Randomize slide order         
  randomize: false,      

  // Fade in the first slide when animation type is "fade"         
  fadeFirstSlide: true,     

  // Whether or not to put captions on thumbnails when using the "thumbnails" controlNav.      
  thumbCaptions: false,           

  // Pause the slideshow when interacting with control elements
  pauseOnAction: true,        

  // Pause the slideshow when hovering over slider, then resume when no longer hovering    
  pauseOnHover: false,       

  // Pause the slideshow when tab is invisible, resume when visible. 
  // Provides better UX, lower CPU usage.     
  pauseInvisible: true,   

  // Slider will use CSS3 transitions if available   
  useCSS: true,          

  // Allow touch swipe navigation of the slider on touch-enabled devices         
  touch: true,  

  // If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches                  
  video: false,                   

  // Create navigation for paging control of each slide? Note: Leave true for manualControls usage
  controlNav: true,  

  // Create navigation for previous/next navigation? (true/false)             
  directionNav: true,       

  // Set the text for the "previous" directionNav item      
  prevText: "Previous",         

  // Set the text for the "next" directionNav item  
  nextText: "Next",               

  // Allow slider navigating via keyboard left/right keys
  keyboard: true,             

  // Allow keyboard navigation to affect multiple sliders. 
  // Default behavior cuts out keyboard navigation with more than one slider present.    
  multipleKeyboard: false,  

  // Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel)
  // Allows slider navigating via mousewheel      
  mousewheel: false,       

  // Create pause/play dynamic element       
  pausePlay: false,           

  // Set the text for the "pause" pausePlay item    
  pauseText: "Pause",            

  // Set the text for the "play" pausePlay item 
  playText: "Play",               

  // jQuery Object/Selector: Declare which container the navigation elements should be appended too. 
  // Default container is the leoslider element. 
  // Example use would be $(".leoslider-container"). 
  // Property is ignored if given element is not found.
  controlsContainer: "",       

  // jQuery Object/Selector: Declare custom control navigation. 
  // Examples would be $(".leo-control-nav li") or "#tabs-nav li img", etc. 
  // The number of elements in your controlNav should match the number of slides/tabs.   
  manualControls: "",     

  // jQuery Object/Selector: Custom prev / next button. 
  // Must be two jQuery elements. 
  // In order to make the events work they have to have the classes "prev" and "next" (plus namespace)        
  customDirectionNav: "",  

  // elector: Mirror the actions performed on this slider with another slider. Use with care.       
  sync: "",             

  // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider          
  asNavFor: "",                   

  // Box-model width of individual carousel items, including horizontal borders and padding.
  itemWidth: 0,                  

  // Margin between carousel items.
  itemMargin: 0,       

  // Minimum number of carousel items that should be visible. 
  // Items will resize fluidly when below this.           
  minItems: 1,  

  // Maxmimum number of carousel items that should be visible. 
  // Items will resize fluidly when above this limit.                  
  maxItems: 0,    

  // Number of carousel items that should move on animation. 
  // If 0, slider will move all visible items.                
  move: 0,             

  // Whether or not to allow a slider comprised of a single slide           
  allowOneSlide: true,           

  // Fires when the slider loads the first slide
  start: function(slider){},            

  // Fires asynchronously with each slider animation
  before: function(slider){
      $.leoslider.right(slider, 200);
      $.leoslider.left(slider, 2000);
  },          

  // Fires after each slider animation completes 
  after: function(slider){},       

  // Fires when the slider reaches the last slide (asynchronous)     
  end: function(slider){},           

  // Fires after a slide is added   
  added: function(slider){},         

  // Fires after a slide is removed   
  removed: function(slider){},  

  //  Fires after the slider is initially setup         
  init: function(slider) {}    
          
});

Change log:

2015-12-08

• Bug fixed

---

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