Plugin de desplazamiento vertical de una página con JavaScript-cachu Slider
| Autor: | mystroken |
|---|---|
| Views Total: | 1,940 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 27, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Cachu Slider es un plugin de slider página JavaScript robusto que le ayuda a crear un un sitio web de desplazamiento de página o una sola página webapp con facilidad.
El plugin permite al usuario desplazarse suavemente a través de sus páginas con la rueda del ratón o haciendo clic en los botones de navegación vertical.
Funcionamiento
Cargue la hoja de estilos ' cachu-Slider. css ' en la cabeza y el JavaScript ' cachu-Slider. js ' en la parte inferior de la página.
<link href="dist/cachu-slider.css" rel="stylesheet"> <script src="dist/cachu-slider.js"></script>
Agregar secciones de página en un elemento contenedor con la clase CSS de ' cachu__container ' como estos:
<div class="cachu__container"> <div class="cachu__sections"> <section class="cachu__section">Section 1</section> <section class="cachu__section">Section 2</section> <section class="cachu__section">Section 3</section> ... </div> </div>
Cree una nueva instancia de cachu Slider con opciones predeterminadas.
let slider = new
Cachu(document.querySelector('.cachu__container')); Active el deslizador cachu.
slider.run();
Opciones posibles para personalizar el control deslizante cachu.
let slider = new
Cachu(document.querySelector('.cachu__container'),{
// disable mousewheel interactions
disableMouseEvents: false,
// animation speed in milliseconds
scrollingSpeed: 1000,
// infinite loop
scrollingLoop: true,
// or 'horizontal'
scrollingDirection: 'vertical',
// enable side navigation
navigationEnabled: true,
// navigation position
// or 'top', 'bottom', 'left'
navigationPosition: 'right'
}); Registro de cambios
v0.8.0 (12/27/2018)
- Eliminar Hamsterjs – controlador de eventos de desplazamiento personalizado + letargo
v0.8.0 (07/04/2018)
- Arreglado: deja de ocultar la información de herramientas en cachu-NAV top & inferior
v0.6.0 (06/30/2018)
- Implementado scrollingDirection (vertical & horizontal)





