Ligero deslizador de contenido en Vanilla JavaScript-vanillaSlider
| Autor: | cthedot |
|---|---|
| Views Total: | 1,279 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 10, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un deslizador JavaScript simple, receptivo, táctil y de vainilla que tiene como objetivo rotar a través de cualquier elemento HTML con animaciones CSS personalizadas.
¿Cómo funciona?
Descargue y coloque los archivos de vanillaSlider en el documento.
<link rel="stylesheet" href="css/vanillaslider.css"> <script src="js/vanillaslider.js"></script>
Incluya Hammer. js para el soporte de eventos táctiles.
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
La estructura HTML básica para el control deslizante.
<div class="vslider default"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> ... </div>
El código JavaScript para representar un control deslizante básico en la Página Web.
vanillaSlider(
document.querySelectorAll('.default')
) Para establecer el control deslizante, pase el siguiente objeto Options como segundo parámetro a la función ' vanillaSlider '.
vanillaSlider(
document.querySelectorAll('.default'),{
itemSelector: 'div',
prefix: 'vslider-',
// if null set height automatically else use height
// number (=px) or explicit like "3em"
height: null,
rotation: true,
autoplay: true,
initialTimeout: 4000,
timeout: 8000,
navigation: true,
keyboardnavigation: true,
// needs Hammer.js
swipenavigation: true,
swipedirection: 'h', // h or v
wheelnavigation: false,
onSwipeWheel: null,
status: true,
statusContent: function (index, length) {
return '•';
},
after: function (index, length) {}
}
) Registro de cambios
10/10/2018
- Corregido para MS Edge
