Fullpage

Create fullscreen scrolling websites, pages or components. Designed for touch. Totally responsive.

Navigate fullpage slides by swiping horizzontalyy on touch devices or trackpad. In alternative, click on the left/right arrows to move forward or go back.

Slide 1
Slide 2
Slide 3
Slide 4

Usage

The fullpage component consists in a list of slides which occupy the entire viewport. From a gallery sliders to editorial news, the range of usage is various. It’s completely responsive and customizable.

Customization

Customizing the fullpage slider is pretty simple and straightforward. You can do it with few changes to Sass variables (functionality) and CSS Custom Properties (layout).

Set direction

You can set the slider direction by changing $verticalScroll Sass variable. Setting it to true changes the entire slider layout suiting it for vertical scrolling.

It’s set false by default.

Enable navigation

You can enable/disable the navigation arrows by changing the $slideNavigation Sass variable.

It’s set true by default.

Change background

Each slide has a default background color set by --slide-background variable.

[data-fullpage] {
  --slide-background: #cbd5e1;
}

You can change the background color or switch to a background image simply overriding this variable for a selected slide as following:

  [data-slide]:nth-child(1) {
    --slide-background: #6ee7b7;
  }

Variables

This is the list of variables related to this component. You can customize the design by changing or overriding these values:

  --slide-background: #cbd5e1;
  --slide-content-padding: calc(var(--slide-padding) * 2);
  --slide-size: 100%;
  --slide-padding: 2rem;
  --slide-arrow-color: #000;
  --slide-arrow-size: .675rem;
← Toggle
Range →