Author: | goVanilla |
---|---|
Views Total: | 4,912 views |
Official Page: | Go to website |
Last Update: | October 12, 2015 |
License: | MIT |
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