Foto

CRISTIAN NAVARRO

PhD Candidate in Economics, CEMFI
cristian.navarro@cemfi.edu.es

About
Research
Teaching

fullPage.js

fullPage.js

preview compatibility

English | Español | Français | Pусский | 中文 | 한국어 | Português Brasileiro

Disponible pour Vue, React et Angular.

fullPage.js version License PayPal Donate jsDelivr Hits Minzipped Size   |   Created by @imac2

Une bibliothèque simple et facile à utiliser pour créer des sites Web qui défile en plein écran (aussi connus sous le nom de sites web d’une seule page ou d’une page). Elle permet la création de sites Web à défilement en plein écran, ainsi que l’ajout de quelques carousel panoramique à l’intérieur des sections du site.

Introduction

Les suggestions sont les bienvenues, non seulement pour les demandes de fonctionnalités mais aussi pour l’amélioration du style de codage. Faisons de cette bibliothèque une grande bibliothèque pour rendre la vie des gens plus facile !

Compatibilité

fullPage.js est entièrement fonctionnel sur tous les navigateurs modernes & IE 11. Il fournit également un support tactile pour les téléphones mobiles, les tablettes et les ordinateurs à écran tactile.

Remerciements particuliers à Browserstack pour son soutien à fullpage.js.

Licence

Licence commercial

Si vous voulez utiliser fullPage pour développer des sites, thèmes, projets et applications non open-source, la licence commerciale est la licence appropriée. Avec cette option, votre code source reste propriétaire. Ce qui signifie que vous n’aurez pas à changer tout le code source de votre application pour une licence open source. Achat d’une licence commerciale pleine page

Licence open-source

Si vous créez une application open source sous une licence compatible avec la licence GNU GPL v3, vous pouvez utiliser fullPage sous les termes de la GPLv3.

You will have to provide a prominent notice that fullPage.js is in use. Les commentaires de crédit dans les fichiers JavaScript et CSS doivent être conservés intacts. (même après la combinaison ou la minification)

En savoir plus sur la licence de fullPage.

Usage

Comme vous pouvez le voir dans les fichiers d’exemple, vous devrez inclure :

Optionnellement, lorsque vous utilisez css3:false, vous pouvez ajouter le fichier easings file au cas où vous voudriez utiliser d’autres effets d’assouplissement que celui inclus dans la bibliothèque (easeInOutCubic).

#### Installer avec bower ou npm En option, vous pouvez installer fullPage.js avec bower ou npm si vous préférez :

Terminal :

 // Avec bower
 bower install fullpage.js

 // Avec npm
 npm installer fullpage.js

#### Y compris les fichiers :

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

<!-- Cette ligne suivante est facultative. Seulement nécessaire si vous utilisez l'option css3:false et que vous voulez utiliser d'autres effets d'assouplissement plutôt que "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

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

Vous utilisez Webpack, Browserify ou Require.js ? Vérifiez comment utiliser fullPage.js avec les chargeurs de modules .

Utilisation facultative du CDN

Si vous préférez utiliser un CDN pour charger les fichiers nécessaires, fullPage.js est dans CDNJS : https://cdnjs.com/libraries/fullPage.js

Structure HTML requise

Commencez votre document HTML avec la déclaration obligatoiredéclaration DOCTYPE HTML sur la 1ère ligne de votre code HTML. Sinon, vous pourriez avoir des problèmes avec la hauteur des sections. Les exemples fournis utilisent HTML 5 doctype <!DOCTYPE html>.

Chaque section sera définie avec un élément contenant la classe section. La section active par défaut sera la première section, qui sera considérée comme la page d’accueil.

Les sections doivent être placées dans un emballage (<div id="fullpage"> dans ce cas). L’emballage ne peut pas être l’élément body.

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

Si vous voulez définir un point de départ différent de la première section ou de la première diapositive d’une section, ajoutez simplement la classe active à la section et à la diapositive que vous voulez charger en premier.

<div class="section active">Some section</div>

Afin de créer un curseur paysage dans une section, chaque diapositive sera définie par défaut avec un élément contenant la classe slide:

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

Vous pouvez voir un exemple entièrement fonctionnel de la structure HTML dans le fichier simple.html.

Initialisation

Initialisation avec Vanilla Javascript

Tout ce que vous avez à faire est d’appeler fullPage.js avant de fermer la balise </body>.

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

Initialisation avec jQuery

Vous pouvez utiliser fullpage.js comme plugin jQuery si vous le souhaitez !

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

	//methods
	$.fn.fullpage.setAllowScrolling(false);
});

Les fonctions et méthodes peuvent toujours être appelées de la manière jQuery, comme dans fullPage.js v2.X.

Exemple de Vanille JS avec toutes les options

Une initialisation plus complexe avec toutes les options définies pourrait ressembler à ceci :


var myFullpage = new fullpage('#fullpage', {
	// Navigation
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: false,
	slidesNavPosition: 'bottom',

	// Défilement
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 600,
	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: true,
	scrollOverflowMacStyle: false,
	scrollOverflowReset: false,
	touchSensitivity: 15,
	bigSectionsDestination: null,

	// Accessibilité
	keyboardScrolling: true,
	animateAnchor: true,
	recordHistory: true,

	// Design
	controlArrows: true,
	controlArrowsHTML: [
		'<div class="fp-arrow"></div>', 
		'<div class="fp-arrow"></div>'
	],
	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'},
	dropEffect: false,
	dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
	waterEffect: false,
	waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
	cards: false,
	cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

	// Sélecteurs personnalisés
	sectionSelector: '.section',
	slideSelector: '.slide',

	lazyLoading: true,
	observer: true,
	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

	// Événements
	beforeLeave: function(origin, destination, direction, trigger){},
	onLeave: function(origin, destination, direction, trigger){},
	afterLoad: function(origin, destination, direction, trigger){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction, trigger){},
	onSlideLeave: function(section, origin, destination, direction, trigger){},
	onScrollOverflow: function(section, slide, position, direction){}
});

Créer des liens vers des sections ou des diapositives

Si vous utilisez fullPage.js avec des liens d’ancrage pour les sections (en utilisant l’option anchors ou l’attribut data-anchor dans chaque section), alors vous pourrez également utiliser des liens d’ancrage pour naviguer directement vers une certaine diapositive dans une section.

Ceci serait un exemple d’un lien avec un ancre : https://alvarotrigo.com/fullPage/#secondPage/2 (qui est l’URL que vous verrez une fois que vous accéderez à cette section/diapositive manuellement) Remarquez que la dernière partie de l’URL se termine par #secondPage/2.

Avoir l’initialisation suivante :

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

L’ancre à la fin de l’URL #secondPage/2 définit respectivement la section et la diapositive de destination. Dans l’URL précédente, la section de destination sera celle définie avec l’ancre secondPage et la diapositive sera la 2ème diapositive, car nous utilisons l’index 2 pour cela. (la première diapositive d’une section a l’index 0, car techniquement c’est une section).

Nous aurions pu utiliser une ancre personnalisée pour la diapositive au lieu de son index si nous avions utilisé l’attribut data-anchor sur le balisage HTML de cette façon :

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

Dans ce dernier cas, l’URL que nous utiliserions serait #secondPage/slide3, qui est l’équivalent de notre précédente #secondPage/2.

Notez que les ancres de section peuvent aussi être définies de la même manière, en utilisant l’attribut data-anchor, si aucun tableau anchors n’est fourni.

Attention!, les balises data-anchor ne peuvent pas avoir la même valeur que n’importe quel élément ID sur le site (ou élément NAME pour IE).

Créer des sections plus petites ou plus grandes

Démo fullPage.js fournit un moyen de supprimer la restriction de hauteur complète de ses sections et diapositives. Il est possible de créer des sections dont la hauteur est plus petite ou plus grande que la fenêtre. C’est idéal pour les pieds de page. Il est important de réaliser qu’il n’est pas logique d’avoir toutes vos sections utilisant cette fonctionnalité. S’il y a plus d’une section dans le chargement initial du site, fullPage.js ne défilera pas du tout pour voir la section suivante comme elle sera déjà dans la fenêtre.

Pour créer des sections plus petites, utilisez simplement la classe fp-auto-height dans la section que vous voulez appliquer. Il prendra alors la hauteur définie par le contenu de votre section/diapositive.

<div class="section">Vue d'ensemble </div>
<div class="section fp-auto-height">Auto height</div>
Sections de hauteur automatique réactives

Une hauteur automatique réactive peut être appliquée en utilisant la classe fp-auto-haut-responsive. De cette façon, les sections seront en plein écran jusqu’à ce que le mode réactif soit activé. Ensuite, ils prendront la taille requise par leur contenu, qui peut être plus grand ou plus petit que la fenêtre d’affichage.

Classes d’états ajoutées par fullpage.js

Fullpage.js ajoute plusieurs classes dans différents éléments pour garder une trace de l’état du site :

Lazy Loading

Demo fullPage.js fournit un moyen de charger paresseusement des images, des vidéos et des éléments audio pour qu’ils ne ralentissent pas le chargement de votre site ou le transfert de données inutilement gaspillé. Si vous utilisez un chargement paresseux, tous ces éléments ne seront chargés qu’en entrant dans la fenêtre d’affichage. Pour activer le lazy loading, il vous suffit de changer votre attribut src en data-src comme indiqué ci-dessous :

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

Si vous utilisez déjà une autre solution de chargement paresseux qui utilise également data-src, vous pouvez désactiver le chargement paresseux de fullPage.js en définissant l’option lazyLoading : false.

Lecture automatique/pause automatique des médias intégrés

Demo Note : la fonction de lecture automatique peut ne pas fonctionner sur certains appareils mobiles selon le système d’exploitation et le navigateur (i.e. Safari on iOS version < 10.0).

Jouer sur la section/charge de diapositives :

L’utilisation de l’attribut autoplay pour les vidéos ou l’audio, ou du paramètre autoplay=1 pour les iframes youtube entraînera la lecture de l’élément média au chargement de la page. Pour le lire sur le chargement de sections/diapositives, utilisez à la place l’attribut data-autoplay. Par exemple :

<audio data-autoplay>
	<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>
Pause en congé

Les iframes HTML5 <video> / <audio> et Youtube sont automatiquement mis en pause lorsque vous vous éloignez d’une section ou d’une diapositive. Ceci peut être désactivé en utilisant l’attribut data-autoplay. Par exemple :

<audio data-autoplay>
	<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Utiliser des extensions

fullpage.js fournit un ensemble d’extensions que vous pouvez utiliser pour améliorer ses fonctionnalités par défaut. Toutes ces options sont listées comme options fullpage.js.

Extensions nécessite que vous utilisiez le fichier minifié fullpage.extensions.min.js qui se trouve dans le dossier dist au lieu du fichier fullPage.js habituel (fullpage.js ou fullpage.min.js).

Une fois le fichier d’extension acquis, vous devrez l’ajouter avant fullPage. Par exemple, si je veux utiliser l’extension Continuous Horizontal, j’aurais inclus le fichier d’extension puis la version des extensions du fichier fullPage.

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

Une clé d’activation et une clé de licence seront requises pour chaque extension. Voir plus de détails à ce sujet ici.

Vous pourrez ensuite les utiliser et les configurer comme expliqué dans options.

Options

Vous pouvez aussi empêcher le scrolloverflow d’être appliqué en mode réactif lorsque vous utilisez fp-auto-height-responsive dans l’élément section.

Méthodes

Vous pouvez les voir en action ici

getActiveSection()

Demo Obtient un objet (type Section) contenant la section active et ses propriétés.

fullpage_api.getActiveSection() ;

getActiveSlide()

Demo Obtient un objet (type Diapositive) contenant la diapositive active et ses propriétés.

fullpage_api.getActiveSlide() ;

getScrollY() & getScrollX

Demo getScrollY Gets the Y position of the fullPage wrapper. getScrollX gets the X position of the active horizontal slide.

fullpage_api.getScrollY();
fullpage_api.getScrollX();

moveSectionUp()

Demo Fait défiler une section vers le haut :

fullpage_api.moveSectionUp() ;

moveSectionDown()

Demo Fait défiler une section vers le bas :

fullpage_api.moveSectionDown() ;

moveTo(section, slide)

Demo Fait défiler la page jusqu’à la section donnée et fait glisser. La première section aura l’index 1 tandis que la première diapositive, celle qui est visible par défaut, aura l’index 0.

/*Défilement vers la section avec le lien d'ancrage `firstSlide` et vers le 2nd Slide */
fullpage_api.moveTo('firstSlide', 2) ;


//Se rendre à la 3ème section (avec l'index 3) du site
fullpage_api.moveTo(3, 0) ;

//Qui est identique à
fullpage_api.moveTo(3) ;

silentMoveTo(section, slide)

Démo Exactement la même chose que moveTo mais dans ce cas il effectue le défilement sans animation. Un saut direct vers la destination.

/*Défilement vers la section avec le lien d'ancrage `firstSlide` et vers le 2nd Slide */
fullpage_api.silentMoveTo('firstSlide', 2) ;

moveSlideRight()

Démo Fait défiler le curseur horizontal de la section en cours jusqu’à la diapositive suivante :

fullpage_api.moveSlideRight() ;

moveSlideLeft()

Démo Fait défiler le curseur horizontal de la section en cours jusqu’à la diapositive précédente :

fullpage_api.moveSlideLeft() ;

setAutoScrolling(booléen)

Demo Définit la configuration de défilement en temps réel. Définit le comportement du défilement de la page. S’il est réglé sur true, il utilisera le défilement automatique, sinon, il utilisera le défilement manuel ou normal du site.

fullpage_api.setAutoScrolling(false) ;

setFitToSection(booléen)

Démo Définit la valeur de l’option fitToSection déterminant si la section doit être affichée à l’écran ou non.

fullpage_api.setFitToSection(false) ;

fitToSection()

Démo Fait défiler jusqu’à la section active la plus proche qui s’adapte dans la fenêtre de visualisation.

fullpage_api.fitToSection() ;

setLockAnchors(booléen)

Démo Définit la valeur de l’option lockAnchors déterminant si les ancres auront un effet dans l’URL ou non.

fullpage_api.setLockAnchors(false) ;

setKeyboardScrolling(boolean, [directions])

Demo Ajoute ou supprime la possibilité de faire défiler les sections/glissières en utilisant la roulette de la souris/le trackpad ou les gestes du toucher (qui est actif par défaut). Notez que cela ne désactivera pas le défilement du clavier. Vous aurait besoin d’utiliser setKeyboardScrolling pour cela.

//désactivation de tout le défilement du clavier
fullpage_api.setKeyboardScrolling(false) ;

//désactivation du défilement du clavier
fullpage_api.setKeyboardScrolling(false, 'down') ;

//désactivation du défilement du clavier vers le bas et vers la droite
fullpage_api.setKeyboardScrolling(false, 'down, right') ;

setRecordHistory(booléen)

Demo Définit s’il faut enregistrer l’historique pour chaque changement de hachage dans l’URL.

fullpage_api.setRecordHistory(false) ;

setScrollingSpeed(millisecondes)

Démo Définit la vitesse de défilement en millisecondes.

fullpage_api.setScrollingSpeed(700) ;

destroy(type)

Demo Détruit les événements du plugin et éventuellement son balisage HTML et ses styles. Idéal à utiliser lorsque vous utilisez AJAX pour charger du contenu.

//destruction de tous les événements Javascript créés par fullPage.js (défilement, hashchange dans l'URL...)
fullpage_api.destroy() ;

//déstruction de tous les événements Javascript et de toute modification faite par fullPage.js par rapport à votre balisage HTML d'origine.
fullpage_api.destroy('all') ;

reBuild()

Met à jour la structure du DOM pour l’adapter à la nouvelle taille de la fenêtre ou à son contenu. Idéal à utiliser en combinaison avec des appels AJAX ou des changements externes dans la structure DOM du site, spécialement quand on utilise scrollOverflow:true.

fullpage_api.reBuild() ;

setResponsive(booléen)

Demo Définit le mode de réponse de la page. Quand il est réglé sur true, le défilement automatique sera désactivé et le résultat sera exactement le même que lorsque les options responsiveWidth ou responsiveHeight sont activées.

fullpage_api.setResponsive(true) ;

responsiveSlides.toSections()

Extension de fullpage.js. Nécessite fullpage.js >= 3.0.1. Transforme les diapositives horizontales en sections verticales.

fullpage_api.responsiveSlides.toSections() ;

responsiveSlides.toSlides()

Extension de fullpage.js. Nécessite fullpage.js >= 3.0.1. Retourne les diapositives originales (maintenant converties en sections verticales) en diapositives horizontales à nouveau.

fullpage_api.responsiveSlides.toSlides() ;

Callbacks

Démo Vous pouvez les voir en action ici.

Certains callbacks, tels que onLeave contiendront des paramètres de type Object contenant les propriétés suivantes :

afterLoad (origin, destination, direction, trigger)

Le callback est déclenché une fois que les sections ont été chargées, après la fin du défilement. Paramètres :

Exemple :

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

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

		//indice d'utilisation
		if(origin.index == 2){
			alert("Section 3 a terminé le chargement") ;
		}

		//utilisation de anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("Section 2 a terminé le chargement") ;
		}
	}
}) ;

Exemple:s

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

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

		//using index
		if(origin.index == 2){
			alert("Section 3 ended loading");
		}

		//using anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

onLeave (origin, destination, direction, trigger)

Ce callback est déclenché dès que l’utilisateur quitte une section, dans la transition vers la nouvelle section. Si vous retournez false, le coup sera annulé avant qu’il n’ait lieu.

Paramètres :

Exemple :

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

		//après avoir quitté la section 2
		if(origin.index == 1 && direction ==='down'){
			alert("Aller à la section 3 !");
		}

		else if(origin.index == 1 && direction =='up'){
			alert("Aller à la section 1 !");
		}
	}
}) ;

beforeLeave (origin, destination, direction, trigger)

Demo This callback is fired right before leaving the section, just before the transition takes place.

You can use this callback to prevent and cancel the scroll before it takes place by returning false.

Parameters:

Example:


var cont = 0;
new fullpage('#fullpage', {
	beforeLeave: function(origin, destination, direction, trigger){

		// prevents scroll until we scroll 4 times
		cont++;
		return cont === 4;
	}
});

afterRender()

Demo Ce callback est déclenché juste après la génération de la structure de la page. C’est le callback que vous voulez utiliser pour initialiser d’autres plugins ou lancer tout code qui nécessite que le document soit prêt (car ce plugin modifie le DOM pour créer la structure résultante). Voir FAQs pour plus d’informations.

Exemple :

new fullpage('#fullpage', {
	afterRender : function(){
		var pluginContainer = this ;
		alert("La structure DOM résultante est prête");
	}
}) ;

afterResize(largeur, hauteur)

Demo Ce rappel est déclenché après le redimensionnement de la fenêtre du navigateur. Juste après le redimensionnement des sections.

Paramètres :

Exemple :

new fullpage('#fullpage', {
	afterResize : function(largeur, hauteur){
		var fullpageContainer = this;
		alert("Le redimensionnement des sections est terminé");
	}
}) ;

afterReBuild()

Demo Ce rappel est lancé après la reconstruction manuelle de fullpage.js en appelant fullpage_api.reBuild().

Exemple :

new fullpage('#fullpage', {
	afterReBuild : function(){
		console.log("fullPage.js a été reconstruit manuellement");
	}
}) ;

afterResponsive(isResponsive)

Demo Ce callback est déclenché après le passage de fullpage.js du mode normal au mode réactif ou du mode réactif au mode normal.

Paramètres :

Exemple :

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

afterSlideLoad (section), origine, destination, direction, trigger)

Demo Callback tiré une fois que la diapositive d’une section a été chargée, après que le défilement soit terminé.

Paramètres :

Exemple :

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

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

		//première diapositive de la deuxième section
		if(section.anchor =='secondPage' && destination.index == 1){
			alert("Première diapositive chargée");
		}

		//seconde diapositive de la deuxième section (en supposant que #secondSlide est le
		//anchor pour la deuxième diapositive)
		if(section.index == 1 && destination.anchor =='secondSlide'){
			alert("Deuxième diapositive chargée");
		}
	}
}) ;

onSlideLeave (section, origine, destination, direction, trigger)

Demo Ce callback est déclenché une fois que l’utilisateur quitte une glissière pour aller vers une autre, dans la transition vers la nouvelle glissière. Si vous retournez `false’, le coup sera annulé avant qu’il n’ait lieu.

Paramètres :

Exemple :

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

		//en laissant la première diapositive de la 2ème section vers la droite
		if(section.index == 1 && origine.index == 0 && direction =='right'){
			alert("Quitter la première diapositive!!");
		}

		//en laissant la 3ème diapositive de la 2ème section vers la gauche
		if(section.index == 1 && origine.index == 2 && direction =='left'){
			alert("Going to slide 2 !");
		}
	}
}) ;

Annuler un coup avant qu’il n’ait lieu

Vous pouvez annuler un coup en retournant false sur le callback onSlideLeave. Identique à l’annulation d’un mouvement avec onLeave.

onScrollOverflow (section, slide, position, direction)

Demo This callback gets fired when a scrolling inside a scrollable section when using the fullPage.js option scrollOverflow: true.

Parameters:

Example:

new fullpage('#fullpage', {
	onScrollOverflow: function( section, slide, position, direction){
		console.log(section);
		console.log("position: " + position);
	}
});

Signaler les problèmes

  1. S’il vous plaît, cherchez votre problème avant de demander à l’aide de la recherche de problèmes github.
  2. Assurez-vous d’utiliser la dernière version de fullpage.js. Aucun support n’est fourni pour les anciennes versions.
  3. Utilisez [le forum Github Issues] (https://github.com/alvarotrigo/fullPage.js/issues) pour créer des problèmes.
  4. Une reproduction isolée du numéro sera exigée. Si possible, utilisezjsfiddle oucodepen pour cela.

Contribuer à fullpage.js

Veuillez consulter[Contribuer à fullpage.js] (https://github.com/alvarotrigo/fullPage.js/wiki/Contributing-to-fullpage.js)

Changelog

Pour voir la liste des changements récents, voir la section[Communiqués] (https://github.com/alvarotrigo/fullPage.js/releases).

Build tasks

Vous voulez créer des fichiers de distribution fullpage.js ? Veuillez consulter Tâches de construction

Ressources

Qui utilise fullPage.js

Google Coca-cola eBay BBC Sony

Vodafone British Airways McDonalds EA Vogue Mi

Mercedes sym Bugatti eDarling Ubisoft

Des dons

Les dons seraient plus que bienvenus :)

Donate

Les sponsors

Devenez sponsor et obtenez votre logo sur notre README sur Github avec un lien vers votre site. [Devenez sponsor] | [Devenez patreon]

Codeless Stackpath Browserstack CodePen

Gens