Deslizador horizontal suave con JavaScript y CSS3-skrolr

Vista prévia

Descripción

skrolr es una biblioteca de JavaScript ligera y libre de dependencia que se utiliza para generar un deslizador/desplazador horizontal con capacidad de respuesta de una lista HTML que utiliza transiciones CSS3 para la animación deslizante suave.

Funcionamiento

Agregue los siguientes archivos JS y CSS a la Página Web.

<script src="skrolr.js"></script>
<link rel="stylesheet" href="skrolr.css">

Cree una lista HTML para el control deslizante.

<ul id="slide-container">

<li class="l1"></li>

<li class="l2"></li>

<li class="l3"></li>

<li class="l4"></li>

<li class="l5"></li>

<li class="l6"></li>
</ul>

Inicialice la skrolr.

mySlider = document.getElementById("slide-container");
mySlider.skrolr ({

scrollTime: 2000,

transitionTime: 750,

arrows: true,

numWide: [


[0,500,1], // width of parent is 0-499px, show 1 <li> element


[500,750,2],


[750,1000,3],


[1000,1250,4],


[1250,1500,5],


[1500,1750,6],


[1750,,7] // width of parent is at least (no maximum) 1750px, show 7 <li> elements

],

size: "100% 400px" // width then height
});

Todas las opciones de personalización predeterminadas.

mySlider.skrolr ({


// animation speed

scrollTime: 3000,


// transition speed

transitionTime: 500,


// easing effect

transitionTiming: 'ease-in-out'


// show the navigation arrows

arrows: true,


// stop the slider

stop: false,


// Forward and backward

forward: 500,

backward: 500,


numWide: [


[0,500,1], // width of parent is 0-499px, show 1 <li> element


[500,750,2],


[750,1000,3],


[1000,1250,4],


[1250,1500,5],


[1500,1750,6],


[1750,,7] // width of parent is at least (no maximum) 1750px, show 7 <li> elements

],


// show the buttons

buttons: false


// slider size

size: "100% 400px"


 });

Registro de cambios

09/15/2018

• Bugfix