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

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

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

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.