You can define the starting section and slide by adding the class active to them.

A section can contain horizontal slides. In this case we have a single section containing 4 horizontal slides.

You can use the Scroll Horizontally extension if you want them to be scrollable with the mousewheel or trackpad.

You can get different 'easing' animations from pages like https://matthewlein.com/tools/ceaser or https://easings.net/

Optionally, you can define the navigation tooltips by using the option navigationTooltips or the HTML attribute data-tooltip on each vertical section.

To change their color or style, you can overwrite their CSS using:

/* Overwriting styles for the navigation dots */
#fp-nav ul li a span, 
.fp-slidesNav ul li a span{
    background: white;
}

fullPage.js provides a way to automatically 'link' your own menu with the vertical sections, so it can not only link to them but also highlight the active item.

Note that fullPage.js will not style the menu for you, you need to provide the styling.

Although not directly, fullPage.js also provides ways to also link the menu with horizontal slides. See this demo.

It is specially useful if you want to trigger scroll-based animations.

Any thir-party component relying on scrolling might need this setting to be set to true. Parallax effects, Scroll Magic, Skrollr...

It will need to be set to false to use the fullPage.js option continuousVertical: true

You can decide not not use inner scrolling on specific sections by adding the class fp-noscroll on a specific section or slide.

If you want to avoid having a scrollable section or slide when on responsive mode (triggered by the responsiveWidth or the responsiveHeight options), you can add the class fp-auto-height-responsive to that specific section or slide.

The option recordHistory is automatically turned off when using autoScrolling: false.

The following options are not compatible with autoScrolling: false:

- continuousVertical: true

- fadingEffect: true

- scrollHorizontally: true

There are two ways to define anchors:

- By using the anchors option for the vertical sections only.

- Or by using the HTML data-anchor attribute on each section and slide.

Be careful! data-anchor tags or the values in the anchors option cannot have the same value as any ID element on the site (or NAME element for IE).

You can hide sections are slides dynaically. fullPage.js will adapt.

This comes on handy on responsive sites where you might want to hide certain slides or sections on small screen devices.

Not compatible with the follwing options:

- loopTop: true

- loopBottom: true

- scrollBar: false

- autoScrolling: false

You can also define the lazyLoadThreshold, by default is 0.

Videos will only auto-play in desktop devices due to browser limitations.

Youtube videos won't autoplay in Chrome unless you use the parameter ?mute=1 on the src attribute URL.

Not compatible with the option continuousVertical: true

Not compatible with continuousHorizontal: true

We are using the fullPage.js callbacks, the moveSectionDown() function and the setTimeout function of JavaScript.

You can also do the same to only autoplay horizontal slides. Check out this tutorial.

Be careful! This option should not be applied to any section/slide element itself.

As an alternative in some cases, such as modals for example, you can also use setAllowScrolling(false) when the element gets shown and setAllowScrolling(true) when it gets closed.

The parallax option is not compatible with:

- dragAndMove

- offsetSections

- Smaller or larger sections using the class fp-auto-height

It can be turned on for sections and slides or just for one of them.

Use: fadingEffect: true, fadingEffect: 'slides'. or fadingEffect: 'sections'

The dragAndMove option is not fully compatible with:

- parallax

- continuousVertical

- continuousHorizontal

This option allows you to jump directly to the destination without any animation when the destination is not an immediate sibling in the current section or slide.

Notice we have disabled CSS 3 transformations by using the fullPage.js option css3: false.

This is required when using fixed elements inside the fullPage.js wrapper. Read more.

With a bit of CSS and the right configuration of the URL for the youtube, you can add youtube video as backgrounds.

Note they'll have to be muted and contain the data-keeplaying attribute if you don't want them to pause when sliding to another section.

You can trigger animations in mutiple ways:

- Using CSS State classes

- Using fullPage.js Callbacks

- Or using scroll-based animations like in any other page

To trigger scroll based animations you'll need to use the option scrollBar: true. This will enable the scroll bar on fullPage.js.

You can use CSS to set the padding to one or multiple sections or slides.

Alternatlively, you can use the options paddingTop and paddingBottom to set the

padding for all sections and slides.