Presentación desplazable en pantalla completa en JavaScript-paginable

Vista prévia

Descripción

Pageable es una biblioteca de JavaScript ligera para generar una presentación de desplazamiento a pantalla completa donde los usuarios pueden desplazarse a través de las páginas seccionadas con arrastrar, deslizar y eventos de rueda del ratón.

Soporta desplazamiento horizontal y vertical.

Funcionamiento

Importa el archivo JavaScript principal ' pageable. js ' en el documento.

<script src="js/pageable.js"></script>

Divida su página web en varias secciones con nombres únicos utilizando el atributo ' Data-Anchor '.

<main id="example">

<section data-anchor="Page 1">


Section 1

</section>

<section data-anchor="Page 2">


Section 2

</section>

<section data-anchor="Page 3">


Section 3

</section>

<section data-anchor="Page 4">


Section 4

</section>

<section data-anchor="Page 5">


Section 5

</section>

...
</main>

Active el paginable.

new Pageable("#example");

Opciones predeterminadas para personalizar la presentación desplazable.

new Pageable("#example",{



// displays navigation pips


pips: true,





// animation speed


animation: 300,



// delay in ms


delay: 0,



// the interval in ms that the resize callback is fired


throttle: 50,



// swipe / mouse drag distance in px


swipeThreshold: 50,



// or 'horizontal'


orientation: "vertical",



 // drag / scroll freely instead of snapping to the next page


freeScroll: false,



// nav elements


navPrevEl: false,


navNextEl: false,



// infinite scroll


infinite: false,



 // default: false


slideshow: { // enable slideshow



interval: 3000,



delay: delay


},



// easing function


easing: function easing(t, b, c, d, s) {


 return -c * (t /= d) * (t - 2) + b;


},



// child selector


childSelector: '[data-anchor]',



});

Funciones de devolución de llamada disponibles.

new Pageable("#example",{


onInit: () => {},


onBeforeStart: () => {},


onUpdate: () => {},


onStart: () => {},


onScroll: () => {},


onFinish: () => {},
});

Activar/desactivar eventos desencadenantes.

new Pageable("#example",{


events: {



wheel: true,



mouse: true,



touch: true,



keydown: true


}
});

API methods.

// Scroll to next page.
instace.next();

// Scroll to previous page.
instace.prev();

// Scroll to a specific
instace.scrollToPage(index);

// Scroll to a specific anchor
instace.scrollToAnchor(anchor);

// Set the orientation
// 'vertical' or 'horizontal'
instace.orientate(orientation);

// Stop the slideshow
instace.slideshow().stop();

// start/resume the slideshow
instace.slideshow().start();

Event handlers.

instance.on("init", data => {

// on init
});

instance.on("actualizar", data => {

// on actualizar
});

instance.on("scroll.before", data => {

// before scroll
});

instance.on("scroll.start", data => {

// when scrolling
});

instance.on("scroll", data => {

// during scroll
});

instance.on("scroll.end", data => {

// after scrolling
});

Registro de cambios

v0.6.8 (03/25/2019)

• Fix IE10 compatibilidad

v0.6.7 (03/19/2019)

• Actualizado

v0.6.6 (03/10/2019)

• Añadida la opción de anclajes.

v0.6.5 (02/12/2019)

• Arreglado el arrastre y freeScroll no funcionaba.

v0.6.4 (12/15/2018)

• Permite alternar la navegación del teclado
• Agregar opción para selector secundario personalizado

v0.6.1 (12/15/2018)

• error de corrección de clones

v0.6.0 (12/10/2018)

• soportan IE9 y superior

v0.5.5 (12/09/2018)

• corregir los controles táctiles

v0.5.4 (11/29/2018)

• actualizar

v0.4.3 (11/27/2018)

• actualizar

v0.4.0 (11/27/2018)

• añadido más opciones

v0.3.9 (11/26/2018)

• Corregido: Array. from no soportado en IE11

11/20/2018

• Refactorizar

11/14/2018

• v0.3.6: hot fix

11/13/2018

• v0.3.4: Force remove delay with freeScroll

11/13/2018

• Corregir el error de desplazamiento

10/31/2018

• v0.2.3: add swipeThreshold

09/17/2018

• v0.2.2

09/14/2018

• Añadida una opción para desactivar eventos como Touch y scroll para PWA