fullPage.js

preview compatibility

English | Español | Pусский | 中文 | 한국어

Disponible para Vue, React y Angular.

fullPage.js version License PayPal Donate jsDelivr Hits    |   7Kb gziped   |   Creado por @imac2

Una sencilla librería Javascript para la creación de páginas web con desplazamiento a pantalla completa. También conocida popularmente como “single page websites” o “onepage sites”. Permite crear un desplazamiento a pantalla completa, asi como añadir diapositivas horizontales en las secciones.

Introducción

Las sugerencias serán más que bienvenidas, no solamente por pedidos de nuevas funcionalidades, sino también mejoras en el código. ¡Hagamos de fullPage.js una gran librería para facilitar la vida de las personas!

Compatibilidad

fullPage.js es totalmente compatible y funcional con cualquier navegador moderno, así como en alguno de los antiguos tales como Internet Explorer 9 u Opera 12. Funciona con navegadores que soportan CSS3 tanto en aquellos que no lo soportan, haciéndolo ideal incluso con navegadores antiguos. También provee soporte táctil en dispositivos móviles, tabletas y ordenadores con pantalla táctil.

Gracias a Browserstack por dar soporte a fullPage.js.

Licencia

Commercial license

Si quieres usar fullpage para desarrollo de páginas comerciales, templates, themes, proyectos y aplicaciones, la licencia Comercial es la licencia apropiada para ti. Con esta opción, tu código se mantendrá propietario. Es decir, no tendrás que cambiar la liencia del código de tu aplicación/web/theme etc a la licencia GPL de código abierto. [Compra la licencia comercial]

Open source license

Si estás creando una aplicación de código libre bajo una licencia compatible con la liencia de GNU GPL license v3, podrás hacer uso de fullPage bajo los términos de la licencia GPLv3. Read more about fullPage’s license.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Uso

Como podéis ver en los ejemplos disponibles, es necesario incluir:

Opcionalmente, cuando se usa la opcion css3:false, puedes añadir la librería de jQuery UI en caso que desee usar otro efecto “easing” en lugar de los que están incluidos en la libreria (easeInOutCubic).

Instalar usando bower o npm

Opcionalmente, puedes instalar fullPage.js haciendo uso de Bower o npm si lo prefieres:

Terminal:

// Con bower
bower install fullpage.js

// Con npm
npm install fullpage.js

Incluyendo los archivos:

<link rel="stylesheet" type="text/css" href="fullpage.css" />


<!-- Esta línea es opcional. Sólamente es necesaria si se hace uso de la opción `css3:false` y se quiere usar otro efecto `easing` en lugar de `linear`, `swing` o `easeInOutCubic`. -->
<script src="vendors/easings.min.js"></script>

<!-- Esta línea es opcional y sólamente es necesaria en caso de usar la opción `scrollOverflow:true`. -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Usas Webpack, Browserify o Require.js? Mira como usar fullPage.js con module loaders.

Uso opcional de un CDN

Si lo prefieres puedes hacer uso de un CDN (Content Delivery Network o Red de distribución de contenido) para cargar los archivos de fullPage.js. FullPage.js está disponible en CDNJS: https://cdnjs.com/libraries/fullPage.js

Estructura HTML requerida

El documento HTML requerirá comenzar con el HTML DOCTYPE obligatorio en la primera línea de tu archivo HTML. De lo contrario puedes tener problemas con el tamaño de las secciones y diapositivas. Todos los ejemplos disponibles aquí usan la etiqueta HTML 5 <!DOCTYPE html>.

Cada sección se ha de definir usando la clase section. La sección activa por defecto será la primera, que será tratada como la página de inicio.

Las seciones tienen que estar contenidas en otro elemento (en este caso<div id="fullpage">). El elemento contenedor no puede ser el elemento body de la página.

<div id="fullpage">
	<div class="section">Sección 1</div>
	<div class="section">Sección 2</div>
	<div class="section">Sección 3</div>
	<div class="section">Sección 4</div>
</div>

Si quieres definir una sección de inicio diferente de la primera sección o la primera diapositiva de la sección, simplemente añade la clase active en la sección o diapositiva que quieras que sea visible inicialmente.

<div class="section active">Mi sección de inicio</div>

Puedes usar la clase slide para crear diapositivas horizontales dentro de una sección:

<div class="section">
	<div class="slide"> Diapositiva 1 </div>
	<div class="slide"> Diapositiva 2 </div>
	<div class="slide"> Diapositiva 3 </div>
	<div class="slide"> Diapositiva 4 </div>
</div>

Puedes ver un ejemplo totalmente funcional de la estructura HTML en el ejemplo simple.html.

Inicialización

Todo lo que necesitas hacer es llamar a fullPage.js justo antes del cierre de la etiqueta </body>:

var myFullpage = new fullpage('#fullpage');

Inicialización con Vanilla Javascript

Todo lo que necesitas hacer es llamar a fullPage.js justo antes de la etiqueta de cierre </body>.

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});

//métodos
fullpage_api.setAllowScrolling(false);

Inicialización con jQuery

También puedes usar fullPage.js como plugin de jQuery!

$(document).ready(function() {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true
	});

	//methods
	fullpage_api.setAllowScrolling(false);
});

Las métodos/funciones pueden ser usados como se haría en jQuery, tal y como se hacía en fullpage.js v2.X.

Ejemplo de inicialización Vanilla JS

Una inizialización más compleja con todas las opciones definidas sería así:

new fullpage('#fullpage', {
	//Navegación
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: true,
	slidesNavPosition: 'bottom',

	//Desplazamiento
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 1000,
	scrollBar: false,
	easing: 'easeInOutCubic',
	easingcss3: 'ease',
	loopBottom: false,
	loopTop: false,
	loopHorizontal: true,
	continuousVertical: false,
	continuousHorizontal: false,
	scrollHorizontally: false,
	interlockedSlides: false,
	dragAndMove: false,
	offsetSections: false,
	resetSliders: false,
	fadingEffect: false,
	normalScrollElements: '#element1, .element2',
	scrollOverflow: false,
	scrollOverflowReset: false,
	scrollOverflowOptions: null,
	touchSensitivity: 15,
	bigSectionsDestination: null,

	//Accesibilidad
	keyboardScrolling: true,
	animateAnchor: true,
	recordHistory: true,

	//Diseno
	controlArrows: true,
	verticalCentered: true,
	sectionsColor : ['#ccc', '#fff'],
	paddingTop: '3em',
	paddingBottom: '10px',
	fixedElements: '#header, .footer',
	responsiveWidth: 0,
	responsiveHeight: 0,
	responsiveSlides: false,
	parallax: false,
	parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
	cards: false,
	cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

	//Selectores personalizados
	sectionSelector: '.section',
	slideSelector: '.slide',

	//Eventos
	onLeave: function(origin, destination, direction){},
	afterLoad: function(origin, destination, direction){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction){},
	onSlideLeave: function(section, origin, destination, direction){}
});

Crear enlaces a secciones y diapositivas

Si usas fullPage.js con enlaces de anclaje para las secciones (haciendo uso de la opción anchors o del atributo data-anchor en cada sección), entonces también podrás usar los enlaces de anclaje para navegar a una sección o diapositiva en particular.

Esto sería un ejemplo de un enlace con un enlace de anclaje: https://alvarotrigo.com/fullPage/#secondPage/2 (que es la URL que verás en la URL si accedes a esa sección/diapositiva manualmente). Fíjate que la última parte de la URL termina en: #secondPage/2.

Teniendo la siguiente inicialización:

new fullpage('#fullpage', {
	anchors:['firstPage', 'secondPage', 'thirdPage']
});

El enlace de anclaje al final de la URL #secondPage/2 define la sección y diapositiva de destino respectivamente. En la URL anterior, la sección de destino será la que está definida con el enlace de anclaje secondPage y la diapositiva será la segunda de dicha sección porque estamos usando el índice 2 para ella. La primera diapositiva de una sección tendrá índice 0, porque técnicamente será tratada como una sección.

Podríamos haber usado un enlace de anclaje personalizado para la diapositiva en lugar de su índice si hubiésemos usado el atributo data-anchor en la estructura HTML:

<div class="section">
	<div class="slide" data-anchor="slide1"> Slide 1 </div>
	<div class="slide" data-anchor="slide2"> Slide 2 </div>
	<div class="slide" data-anchor="slide3"> Slide 3 </div>
	<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

En este último caso, la URL que usaríamos sería #secondPage/slide3, que es la equivalente a nuestra URL anterior #secondPage/2.

Ten en cuenta que los enlaces de anclaje en la sección también pueden definirse del mismo modo, es decir, usando el atributo data-anchor siempre y cuando no hayamos definido la opción anchors al iniciar fullPage.js.

Ten cuidado!, las etiquetas data-anchor no pueden tener el mismo valor que ninguna otra etiqueta ID en la página. (o name para Internet Explorer)

Crear secciones más pequeñas o más grandes

Demostración fullPage.js provee un modo de eliminar la restricción de pantalla completa para secciones y diapositivas. Es posible crear secciones con una altura menor o mayor que el tamaño de la ventana del navegador. Esto es especialmente útil para pies de página.

Para crear este tipo de secciones simplemente usa la clase fp-auto-height en la sección donde quieres aplicarlo. De este modo fullPage.js ajustará el tamaño al dado por el contenido de dicha sección o diapositiva.

<div class="section">Ventana completa</div>
<div class="section fp-auto-height">Alto automático</div>

Secciones de tamaño automático y responsive

Demostración Usando la clase fp-auto-height-responsive fullPage.js puede eliminar la restricción de pantalla completa únicamente bajo el modo responsive si asi lo deseas. De este modo la sección pasará a ser una sección de tamaño automático cuando fullPage.js entre en modo responsive. (Usando la opcion responsiveWidth o responsiveHeight)

Classes de estado añadidas por fullpage.js

Fullpage.js añade multiples clases en diferentes elementos para reflejar el estado en el que se encuentra la página web:

Carga pasiva de elementos multimedia

Demostración fullPage.js provee un modo de cargar pasivamente imágenes, vídeos y audio de manera que dichos elementos no ralenticen la carga de la página web y gasten recursos de transferencia innecesarios. Cuando se usa la carga pasiva de elementos, éstos solamente se cargarán cuando entren dentro de la parte visible de la ventana. Para activar esta funcionalidad bastará con cambiar el atributo src por data-src tal y como se muestra a continuación:

<img data-src="image.png">
<video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
</video>

Si ya estabas usando otra librería de carga pasiva (lazy loading) que usa el atributo data-src también, puedes desactivar la carga pasiva de fullpage.js que está activa por defecto usando la opción lazyLoading: false.

Autoreproducir elementos multimedia

Demostración Nota: esta funcionalidad puede que no funcione en dispositivos móviles. Ésto dependerá del sistema operativo y del navegador usado.

Reproducir al cargar la sección o diapositiva:

Usando el atributo autoplay para videos y audios, o el parámetro autoplay=1 para iframes de Youtube causará que el elemento empiece a reproducirse al cargar la página web. Usa el atributo data-autoplay para comenzar a reproducirlo cuando la sección o diapositiva a la que pertenece sea visible en la ventana. Por ejemplo:

<audio data-autoplay>
	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

Pausar al abandonar la sección o diapositiva

Los elementos multimedia HTML 5 incrustados <video> / <audio> y los iframes de Youtube serán automáticamente pausados al abandonar la sección o diapositiva a la que pertenecen. Esto puede deshabilitarse usando el atributo data-keepplaying. Por ejemplo:

<audio data-keepplaying>
	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

Uso de extensiones

fullPage.js provee varias extensiones que puedes usar para mejorar sus ya increíbles efectos. Todas las extensiones están la lista de las opciones de fullPage.js

Las extensiones requieren el uso del archivo comprimido fullpage.extensions.min.js disponible en la carpeta dist en lugar del archivo habitual de fullPage (fullpage.js o fullpage.min.js). Una vez que obtengas el archivo correspondiente a la extensión que deseas usar, tendrás que añadirlo antes del archivo de fullPage. Por ejemplo, si deseo usar la extensión Continuous Horizontal tendré que añadir el fichero de la extension y después el fichero de fullPage versión extensiones.

<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>

Cada extensión requiere de una licencia y de una clave de activación. Ver más detalles sobre el uso de licencias aquí.

Luego podrás usar la extensión y configurarla tal y como se explica en las opciones.

Opciones

new fullpage({
    licenseKey: 'YOUR_KEY_HERE'
});

Ejemplo:

new fullpage('#fullpage', {
	sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

```javascript
new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	menu: '#myMenu'
});

Nota: el menú tiene que estar situado fuera del contenedor de fullpage para evitar problemas cuando se use css3:true. De lo contrario, el menú será automáticamente movido fuera de la estructura de fullPage.js y añadido en el body.

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>

Para evitar que fullPage.js cree la barra de desplazamiento en ciertas secciones o diapositivas, haz uso de la clase fp-noscroll. Por ejemplo: <div class="section fp-noscroll">

Puedes evitar que scrolloverflow se aplique en modo responsive si usas la clase fp-auto-height-responsive en la sección. Más información.

Métodos

Puedes verlos en acción aquí

moveSectionUp()

Demostración Desplaza la página hacia arriba una sección:

fullpage_api.moveSectionUp();

moveSectionDown()

Demostración Desplaza la página hacia abajo una sección:

fullpage_api.moveSectionDown();

moveTo(section, slide)

Demostración Desplaza la página hacia la sección o diapositiva que se le indique. La primera diapositiva en una sección, que es la visible por defecto, tendrá índice 0.

/* Desplazando la página a la sección con el enlace de anclaje `firstSlide` y a la diapositiva número 2*/
fullpage_api.moveTo('firstSlide', 2);


//Desplazándo a la tercera sección de la página
fullpage_api.moveTo(3, 0);

//Que sería lo mismo que hacer esto
fullpage_api.moveTo(3);

silentMoveTo(section, slide)

Demostración Exactamente lo mismo que moveTo pero en este caso el desplazamiento se hará sin animación. Un salto directo al destino sin transición.

/* Desplzando la página a la sección con el link the anclaje `firstSlide` y a la diapositiva numero 2*/
fullpage_api.silentMoveTo('firstSlide', 2);

moveSlideRight()

Demostración Desplaza el carrusel de diapostivas de la sección actual hacia la siguiente diapositiva.

fullpage_api.moveSlideRight();

moveSlideLeft()

Demostración Desplaza el carrusel de diapositivas de la sección actual hacia la diapositiva anterior.

fullpage_api.moveSlideLeft();

setAutoScrolling(boolean)

Demostración Permite definir la configuración de la opción autoScrolling después de la inicialización. Determina si usar desplazamiento “automático” o “a saltos” o usar el desplazamiento tradicional de cualquier página.

fullpage_api.setAutoScrolling(false);

setFitToSection(boolean)

Demostración Determina el valor para la opción fitToSection definiendo si ajustar la sección más cercana a la pantalla o no.

fullpage_api.setFitToSection(false);

fitToSection()

Demostración Desplaza la página hacia la sección activa más cercana encajándola en la pantalla.

fullpage_api.fitToSection();

setLockAnchors(boolean)

Demostración Define el valor para la opción lockAnchors determinando si los enlaces de anclaje tendrán algún efecto en la URL o no.

fullpage_api.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

Demostración Añade o elimina la posibilidad de desplazarse a través de las secciones o diapositivas usando la ruleta del ratón, el trackpad del portátil o con los dedos en dispositivos táctiles. Ten en cuenta que ésto no deshabilitará el desplazamiento usando el teclado. Para ello necesitarás hacer uso de setKeyboardScrolling.


//desabilitando cualquier tipo de desplazamiento
fullpage_api.setAllowScrolling(false);

//desabilitando desplazamiento hacia abajo
fullpage_api.setAllowScrolling(false, 'down');

//desabilitando desplazamiento hacia abajo y hacia la derecha
fullpage_api.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

Demostración Añade o elimina la posibilidad de desplazarse a través de las secciones usando las teclas del teclado (activo por defecto).

//deshabilitando todo tipo de desplazamiento con el teclado
fullpage_api.setKeyboardScrolling(false);

//deshabilitando el desplazamiento hacia abajo con el teclado
fullpage_api.setKeyboardScrolling(false, 'down');

//deshabilitando el desplazamiento hacia abajo y hacia la derecha con el teclado
fullpage_api.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

Demostración Determina si fullPage.js modificará la historia del navegador con cada cambio de enlace de anclaje (#) en la URL.

fullpage_api.setRecordHistory(false);

setScrollingSpeed(milliseconds)

Demostración Define la velocidad de desplazamiento en milisegundos.

fullpage_api.setScrollingSpeed(700);

destroy(type)

Demostración Destruye los eventos de fullPage.js y opcionalmente la estructura HTML creada por el mismo así como cualquier estilo que haya aplicado. Ideal para usar cuando se usa en páginas AJAX.

//destrozando los eventos Javascript de fullPage.js (scrolls, hashchange in the URL...)
fullpage_api.destroy();

//destrozando los eventos Javascript asi como cualquier modificación en el HTML hecha tras iniciar fullPage.js
fullpage_api.destroy('all');

reBuild()

Ajusta el tamaño de las secciones y diapositivas así como su posición y su posible barra de desplazamiento si se usa scrollOverflow:true. Ideal para usar en combinación con llamadas AJAX o cambios externos en la estructura DOM de la página, especialmente cuando se usa scrollOverflow:true.

fullpage_api.reBuild();

setResponsive(boolean)

Demostración Define el modo “responsive”. Cuando se define a true la funcionalidad de autoScrolling será desactivada tal y como sucedería si se disparasen las opciones responsiveWidth o responsiveHeight.

fullpage_api.setResponsive(true);

responsiveSlides.toSections()

Extension of fullpage.js. Convierte diapositivas horizontales en secciones verticales.

fullpage_api.responsiveSlides.toSections();

responsiveSlides.toSlides()

Extension of fullpage.js. Deshace el cambio de las diapositivas horizontales que han sido convertidas a secciones verticales, dejándolas nuevamente como diapositivas horizontales dentro de una sección.

fullpage_api.responsiveSlides.toSlides();

Callbacks

Demostración Puedes verlas en acción aquí.

Algunos eventos de callback, como onLeave, contienen Objectos como parámetros. Dichos objetos son de tipo Section o Slide y continen las siguientes propiedades:

afterLoad (origin, destination, direction)

Se dispara cuando una sección ha sido cargada completamente en la ventana, una vez que el desplazamiento ha terminado. Parámetros:

Por ejemplo:

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterLoad: function(origin, destination, direction){
		var loadedSection = this;

		//usando su índice
		if(destination.index == 2){
			alert("Section 3 ended loading");
		}

		//usando su link de anclaje
		if(destination.anchor == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

onLeave (origin, destination, direction)

Se dispara una vez que el usuario abandona la sección, durante la transición a la nueva sección. Si devuelves false el movimiento se cancelará antes de que tenga lugar.

Parámetros:

Por ejemplo:

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction){
		var leavingSection = this;

		//después de abandonar la sección 2
		if(origin.index == 1 && direction =='down'){
			alert("Me estoy moviendo a la sección 3!");
		}

		else if(origin.index == 1 && direction == 'up'){
			alert("Me estoy moviendo a la sección 1!");
		}
	}
});

Cancelando un desplazamiento antes de que tenga lugar

Puedes cancelar un desplazamiento si devuelves false en el callback onLeave:

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction){
		//prevenimos el desplazamiento si la sección de destino es la tercera de la página
		if(destination.index == 2){
			return false;
		}
	}
});

afterRender()

Será disparado justo después de que la estructura de la página sea generada por fullPage.js. Este callback es útil si quieres iniciar otros plugins o ejecutar cualquier otro código que requiera que la estructura de la página esté lista (ready). fullPage.js modifica la estructura DOM de la página y por lo tanto puede que los elementos en la página se consideren dinámicos. Mira las FAQs para más información.

Ejemplo:

new fullpage('#fullpage', {
	afterRender: function(){
		var pluginContainer = this;
		alert("La estructura resultante ya está lista para su uso");
	}
});

afterResize(width, height)

Será disparado después de que la ventana del navegador sea reajustada en tamaño. Justo después de que las secciones se hayan reajustado.

Parámetros:

Ejemplo:

new fullpage('#fullpage', {
	afterResize: function(width, height){
		var pluginContainer = this;
		alert("Las secciones han terminado de reajustarse");
	}
});

afterReBuild()

Será dispardo después de reajustar fullPage.js de manera manual usando fullpage_api.reBuild().

Example:

new fullpage('#fullpage', {
	afterReBuild: function(){
		console.log("fullPage.js has manually being re-builded");
	}
});

afterResponsive(isResponsive)

Será disparado después de que fullPage.js cambie de su estado normal a “responsive” o viceversa.

Parámetros:

Ejemplo:

new fullpage('#fullpage', {
	afterResponsive: function(isResponsive){
		alert("Es responsive: " + isResponsive);
	}
});

afterSlideLoad (section, origin, destination, direction)

Será disparado una vez cargue la diapositiva de una sección, después que el desplazamiento haya terminado.

Parámetros:

Ejemplo:

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterSlideLoad: function( section, origin, destination, direction){
		var loadedSlide = this;

		//primera diapositiva de la segunda sección
		if(section.anchor == 'secondPage' && destination.index == 1){
			alert("Primera diapositiva cargada");
		}

		//segunda diapositiva de la segunda sección (suponiendo que #secondSlide es
		//el enlace de anclaje de la segunda diapositiva
		if(section.index == 1 && destination.anchor == 'secondSlide'){
			alert("Segunda diapositiva cargada");
		}
	}
});

onSlideLeave (section, origin, destination, direction)

Será disparado una vez que el usuario abandone la diapositiva actual para ir a otra, durante la transición hacia la nueva diapositiva. Devolver false. Si devuelves false, el movimiento se cancelará antes de que tenga lugar.

Parámetros:

Ejemplo:

new fullpage('#fullpage', {
	onSlideLeave: function( section, origin, destination, direction){
		var leavingSlide = this;

		//abandonando la primera diapositiva de la segunda sección y moviendo hacia la derecha
		if(section.index == 1 && origin.index == 0 && direction == 'right'){
			alert("Abandonando la diapositiva 1!!");
		}

		//abandonando la tercera diapositiva de la segunda sección y moviendo hacia la izquierda
		if(section.index == 1 && origin.index == 2 && direction == 'left'){
			alert("Yendo a la diapositiva 2! ");
		}
	}
});

Cancelando un desplazamiento antes de que tenga lugar

Puedes cancelar el desplazamiento devolviendo false en el callback onSlideLeave. Exactamente igual que cuando se usa onLeave.

Reportando problemas

  1. Por favor, usa el buscador en Github issues para buscar tu duda o problema antes de preguntar.
  2. Asegurate de que estás usando la última versión de fullPage.js. No se provee soporte a versiones anteriores.
  3. Usa el foro de Github para crear la pregunta o tema y házlo en inglés a ser posible.
  4. Se requerirá la reproducción aislada del problema. Usa jsfiddle o codepen si es posible.

Contribuir con fullPage.js

Por favor mira Contributing to fullpage.js

Changelog

Para ver la lista de cambios recientes, mira la sección de releases. Sólo disponible en inglés :)

Build tasks

¿Deseas crear archivos de distribución de fullpage.js? Lee los Build Tasks

Recursos

Quién usa fullPage.js

Google Coca-cola eBay BBC Sony

Vodafone British Airways McDonalds EA Vogue Mi

Mercedes sym Bugatti eDarling Ubisoft

Puedes encontrar otra lista más extensa aquí.

Donaciones

¡Agradeceré cualquier donación!

Dona en Patreon

Donate

Sponsors

Conviértete en un sponsor y añade tu logo aquí en Github y en la página principal de fullpage.js con un link a tu página. [Conviértete en un sponsor] | [Dona en Patreon]

Stackpath Browserstack CodePen CodeFirst

People