Deslizador de contenido adaptable de JavaScript puro con animaciones CSS3-LEPs Slider

Vista prévia

Descripción

LEPs Slider es un plugin de presentación de diapositivas JavaScript fácil de usar para crear un deslizador de contenido adaptable, de pantalla completa, estilo carrusel, totalmente configurable que soporta todas las animaciones CSS3.

Funcionamiento

Cargue el archivo LEPs-Slider. CSS en la sección Head para los estilos de slider básicos.

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

Cree un grupo de contenido HTML que desee presentar en el control deslizante.

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

Cargue el LEPs-Slider. js en la parte inferior de la página HTML.

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

Cree una nueva instancia de slider con opciones predeterminadas.

slider1 = new lepsSlider();

Opciones de configuración con valores predeterminados.

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