Enhance One-Page Websites with JavaScript Fullpage Slider

fullpage-vertical-slider is a JavaScript library that enables smooth transitions between fullscreen sections through mousewheel or touch gestures. Each section acts as a standalone page, while subsections allow horizontal content organization within vertical sections.

This library brings structure to single-page websites through organized fullscreen sections. You can implement it for product showcases, portfolios, and storytelling experiences where content separation matters.

How to use it:

1. Install the fullpage-vertical-slider package using NPM:

# NPM
$ npm install fullpage-vertical-slider

2. Import the stylesheet and JavaScript files into your project:

// Stylesheet
<link rel="stylesheet" href="/dist/style.css" />
// ES Module
import FullpageVerticalSlider from "/dist/fvs.es.js";
// UMD
<script type="text/javascript" src="/dist/fvs.umd.js"></script>

3. Structure your page content within a container element. Each full-page section should be a direct child of this container. If a section contains horizontal sub-slides, nest them within a div with the class subsections:

<div class="scroll-container">
  <section class="section s1">Section 1</section>
  <section class="section s2">Section 2</section>
  <section class="section s3">
    Section 3
    <div class="subsections">
      <div class="subsection">Sub 1</div>
      <div class="subsection">Sub 2</div>
      <div class="subsection">Sub 3</div>
    </div>
  </section>
  <section class="section">Last Section</section>
</div>

4. Create a new instance of the FullpageVerticalSlider.

const fvs = new FullpageVerticalSlider({
  // options here
});

5. To define subsections, use the subsections parameter during initialization. For instance, if your website has four sections and the third section has three subsections, configure it like this:

const fvs = new FullpageVerticalSlider({
   subsections: [1, 1, 3, 1],
   onSubsectionEnter: (sectionIndex, subsectionIndex) => {
     console.log(`Section: ${sectionIndex}, Subsection: ${subsectionIndex}`);
     // Your UI logic for subsections
   },
});

6. You also have the ability to programmatically switch subsections using the setSubsection() method. This method accepts the section index, the target subsection index, and an optional boolean to trigger the onSubsectionEnter callback:

// Switch to the 3rd subsection of the 2nd section and emit the event.
fvs.setSubsection(1, 2, true);

7. Sometimes, you might need the slider to behave like standard scrollable content, especially on smaller screens. The responsiveMediaQuery parameter manages this. By default, it’s set to (max-height: 0px), which disables responsive mode. To enable it for viewports with a height of 600px or less, set it as follows:

const fvs = new FullpageVerticalSlider({
  responsiveMediaQuery: '(max-height: 600px)',
});

8. All available options.

/**
 * The minimum amount of pixels the user has to scroll to trigger the next slide.
 */
deltaYThreshold: number;
/**
 * The selector for the container element that holds all the slides.
 */
slidesContainerSelector: string;
/**
 * The selector for the slide sections.
 */
slideSectionSelector: string;
/**
 * The media query that will be used to determine if the responsive mode should be enabled.
 */
responsiveMediaQuery: string;
/**
 * Sets how many subsections are in each section. By default all sections have 1 subsection.
 * Each section can contain subsections. In case there are more than one subsection specified for a section
 * each scroll hit (mouse wheel or touch swipe) will emit a next subsection event instead of
 * scrolling to the next section. When entering a section the subsection event will be emitted
 * for the first subsection. Such event will be emitted before the transition starts.
 * Caution! They can't have zeroes, otherwise it will break logic.
 */
subsections?: number[];
/**
 * Used to block scroll events during subsection transition.
 */
subsectionTransitionDuration: number; 
onSubsectionEnter: (sectionIndex: number, subsectionIndex: number) => void;