Plugin de desplazamiento vertical de una página con JavaScript-cachu Slider

Tiempo de ejecución: 30 minutos. Empezar

Autor: mystroken
Views Total: 1,940
Sitio oficial: Ir a la web
Actualizado: December 27, 2018
Licencia: MIT

Vista prévia

Plugin de desplazamiento vertical de una página con JavaScript-cachu Slider

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)

Te puede interesar: