Pure JavaScript Responsive Content Slider with CSS3 Animations – Leps Slider

Preview:

Description:

Leps Slider is a simple-to-use JavaScript slideshow plugin for creating a responsive, fullscreen, carousel-style, fully configurable content slider that supports all CSS3 animations.

How to use it:

Load the leps-slider.css file in the head section for basic slider styles.

<link rel="stylesheet" href="/path/to/leps-slider.css">

Create a group of html content you want to present in the slider.

<div id="leps-slider">
  <div>
    <img src="slide-1.jpg" class="strech">
  </div>
  <div>
    <img src="slide-2.jpg" class="strech">
  </div>
  <div>
    <img src="slide-3.jpg" class="strech">
  </div>
</div>

Load the leps-slider.js at the bottom of the html page.

<script src="/path/to/leps-slider.js"></script>

Create new slider instance with default options.

slider1 = new lepsSlider();

Configuration options with default values.

// JS selector
wrapper: '#leps-slider',

// {string} - fade or slide
animation: "fade",             

// {string} - Determines the easing method used in transitions. cubic buizier for example 
easing: "ease",               

// {string} - rtl or ltr. defines the dirction of accending slide  
direction: 'ltr',          

// {boolean} - defines if animation will start from 1st slide after finished in last slide     
animationLoop: true,            

// {boolean} - slide automatically or manually. 
// if false, at least 1 navigator menu shold be present
autoSlide: true,       

// {number} - animation duration of each slide         
animationSpeed: 600,      

// {number} - delay of starting first slideShow in miliseconds      
initDelay: 0,    

// {number} - delay of animation of each slide in milisecond               
slideDelay: 0,              

// {boolean}: Randomize slide order    
randomize: false,               

// Usability features
// {boolean} - pause slide show while oiinter is inside slider
pauseOnHover: false,            

// {boolean} - Create navigation for paging control of each clide? 
// Note: Leave true for manualControls usage
indicatorsNav: true,            

// {string|array} - Custom css class name(s) to be added to Navigation menu, could be array or space separated string of names
indicatorsNavContainer: "", 

// {boolean} - Create navigation for previous/next navigation? (true/false)    
directivesNav: true,     

// {string|array} - Custom css class name(s) to be added to Navigation menu, could be array or space separated string of names       
directivesContainer: "",        

// {boolean} - Show pause button
pasueButton: true,           

// {string} - Set the text for the "previous" directionNav item   
prevText: "Prev",               

// {string} - Set the text for the "next" directionNav item
nextText: "Next",               

// {boolean} - Allow slider navigating via keyboard left/right keys
keyboard: true,                 

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

// {nteger} - Margin between carousel items.     
itemMargin: 0,   

// {nteger} - Minimum number of carousel items that should be visible. Items will resize fluidly when below this.               
minItems: 0,    

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

// current slide
currentSlide: 0