Smooth pantalla completa página de presentación con vainilla JavaScript-FullScroll

Vista prévia

Descripción

Una biblioteca de JavaScript vainilla utilizada para crear una presentación de diapositivas/Slider de página vertical a pantalla completa con desplazamiento suave y navegación por teclado. Ideal para crear una presentación de página completa para mostrar que trabaja.

Funcionamiento

Agregue fullscroll. CSS y fullscroll. js al documento HTML.

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

Agregar páginas de pantalla completa al documento.

<div class="fullscroll">

<h1>Page 1</h1>

<span>This is page 1.</span>
</div>
<div class="fullscroll">

<h1>Page 2</h1>

<span>This is page 2.</span>
</div>
<div class="fullscroll">

<h1>Page 3</h1>

<span>This is page 3.</span>
</div>

Cree un nuevo FullScroll.

new FullScroll();

Puede cambiar el selector de páginas FullScroll agregando una opción llamada selector a la función de invocación FullScroll.

new FullScroll({ selector: '#container > .my-page-element-selector' });

Ejecute una función cada vez que se cambie la página.

new FullScroll({ onChange: function(){ /* Do stuff here */ } });

API methods.

// Go to the page with the specfied index.
new FullScroll().goto( 0 );

// Go to the next page.
new FullScroll().next();

// Go to the previous page.
 new FullScroll().previous();

// Get the current page index.
 console.log( new FullScroll().current );