jQuery Plugins › jQuery Layout Plugins › fullPage.js

fullPage.js v4: Fullscreen Scrolling JavaScript Library

File Size:	8.62 MB
Views Total:	121434
Last Update:	07/31/2026 08:16:00 UTC
Publish Date:	10/01/2013 07:51:04 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features:

Full-screen section snapping: Each section occupies 100% of the viewport height. The library handles all scroll-to-section transitions automatically.
Horizontal slide panels: Any section can contain multiple horizontal slides, complete with control arrows and a slide navigation bar.
Touch and swipe support: Built-in touch gesture detection covers mobile phones, tablets, and touch-enabled desktops.
Keyboard navigation: Arrow keys move between sections and slides by default. This can be locked or restricted per direction at runtime.
Anchor-based URL routing: Each section maps to a URL hash anchor, so users can bookmark or share a direct link to any part of the page.
Lazy loading: Images, videos, and audio elements load only when their section enters the viewport.
Auto play/pause for media: Embedded HTML5 video, audio, and YouTube iframes pause automatically on section leave and resume on return.
Responsive fallback: Below a configurable width or height threshold, the library switches to standard page scrolling and adds a fp-responsive class to the body.
Scroll overflow handling: Sections with content taller than the viewport get an internal scrollbar. No content is clipped.
Framework wrappers: Official wrappers exist for jQuery, Vue, React, and Angular.

Use Cases:

Product landing pages: Showcase features one by one with full-screen backgrounds and call-to-action slides.
Portfolio websites: Display projects as separate sections with horizontal galleries inside each.
Storytelling and narrative sites: Guide users through a linear story with visual transitions between chapters.
App feature walkthroughs: Introduce functionality step by step, with embedded video demos that auto-play on section entry.

Installation:

# NPM
$ npm install fullpage.js

How to use it:

1. Import the fullPage.js library's JavaScript and stylesheet in your document.

<!-- Styles -->
<link rel="stylesheet" href="/dist/fullpage.min.css" />

<!-- Library -->
<script src="/dist/fullpage.min.js"></script>

<!-- Or load files from a CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css" />
<script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>

2. Create the html for your one page scrolling website. The HTML must start with a <!DOCTYPE html> declaration. Section height calculations depend on it.

<!-- fullPage.js wrapper — must not be <body> -->
<div id="site">

  <!-- Each .section becomes a full-screen panel -->
  <div class="section" data-anchor="home">
    <h1>Welcome</h1>
  </div>

  <div class="section" data-anchor="about">
    <h2>About Us</h2>
  </div>

  <!-- A section with horizontal slides -->
  <div class="section" data-anchor="work">
    <div class="slide">Project Alpha</div>
    <div class="slide">Project Beta</div>
    <div class="slide">Project Gamma</div>
  </div>

  <div class="section" data-anchor="contact">
    <h2>Get in Touch</h2>
  </div>

</div>

The data-anchor attribute sets the URL hash for each section (e.g., #about). You can also pass anchors through the JavaScript options if you prefer to keep the HTML clean.

3. Initialize fullPage.js and pass options as follows:

new fullpage('#site', {

  // Anchor links per section (matches data-anchor order)
  anchors: ['home', 'about', 'work', 'contact'],

  // Enable smooth auto-scroll snapping
  autoScrolling: true,

  // Show dot navigation on the right side
  navigation: true,
  navigationPosition: 'right',
  navigationTooltips: ['Home', 'About', 'Work', 'Contact'],

  // Background colors per section
  sectionsColor: ['#1a1a2e', '#16213e', '#0f3460', '#533483'],

  // Horizontal slides loop back to start after the last slide
  loopHorizontal: true,
  
});

// Initialize as a jQuery plugin
$(document).ready(function () {
  $('#site').fullpage({
    autoScrolling: true,
    navigation: true,
  });

  // Call methods via jQuery static API
  $.fn.fullpage.moveSectionDown();
});

4. To enable lazy load, change src to data-src on any image, video source, or audio source. fullPage.js swaps the attribute when the section enters the viewport.

<!-- Image loads only when its section becomes visible -->
<img data-src="/images/case-study-hero.jpg" alt="Case study hero" />

<!-- Video sources follow the same pattern -->
<video>
  <source data-src="/video/demo.webm" type="video/webm" />
  <source data-src="/video/demo.mp4"  type="video/mp4" />
</video>

5. Add data-autoplay to any media element to play it when its section loads. The library pauses it automatically on section leave.

<!-- Plays when section loads, pauses when user scrolls away -->
<video data-autoplay muted loop>
  <source data-src="/video/background-loop.mp4" type="video/mp4" />
</video>

<!-- Add data-keepplaying to skip the auto-pause behavior -->
<audio data-keepplaying>
  <source src="/audio/ambient-track.ogg" type="audio/ogg" />
</audio>

6. If your site has a fixed header, set paddingTop to match its height. This keeps content visible behind the header on every section.

new fullpage('#site', {
  autoScrolling: true,
  paddingTop: '70px', // Match your fixed header height
  paddingBottom: '0px',
  fixedElements: '#main-header, .sticky-footer', // These elements leave the scroll structure
});

7. Integrate the library with your navigation menu:

<!-- Place the menu OUTSIDE the fullpage wrapper -->
<nav id="top-nav">
  <ul>
    <li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
    <li data-menuanchor="about"><a href="#about">About</a></li>
    <li data-menuanchor="work"><a href="#work">Work</a></li>
    <li data-menuanchor="contact"><a href="#contact">Contact</a></li>
  </ul>
</nav>

new fullpage('#site', {
  anchors: ['home', 'about', 'work', 'contact'],
  menu: '#top-nav', // fullPage.js adds .active to the matching nav item on scroll
});

8. A section does not have to be fullscreen. Add fp-auto-height to any section and it takes the height of its content.

<div class="section fp-auto-height">
  <!-- This section sizes to its content, ideal for a footer -->
  <footer>© 2025 Studio Name</footer>
</div>

9. All configuration options to customize the one page scrolling effect.

new fullpage('#site', {
  
  // ==========================================
  // LICENSE & CREDITS
  // ==========================================
  
  // Sets the commercial or open-source license key
  licenseKey: 'YOUR_KEY_HERE',
  
  // Defines whether to show the fullPage.js credits label
  credits: { enabled: true, label: 'Made with fullPage.js', position: 'right' },

  // ==========================================
  // NAVIGATION & MENU
  // ==========================================
  
  // Specifies the menu element to link with the sections
  menu: '#myMenu',
  
  // Defines the anchor links shown on the URL for each section
  anchors: ['home', 'about', 'work', 'contact'],
  
  // Determines whether anchors in the URL affect the scrolling behavior
  lockAnchors: false,
  
  // Defines whether the initial load scrolls with an animation to the anchor
  animateAnchor: true,
  
  // Defines whether to push the state of the site to the browser's history
  recordHistory: true,
  
  // Shows a vertical navigation bar made up of small circles
  navigation: true,
  
  // Defines the position of the vertical navigation bar ('left' or 'right')
  navigationPosition: 'right',
  
  // Defines the tooltips to show for the navigation circles
  navigationTooltips:['Home', 'About', 'Work', 'Contact'],
  
  // Shows a persistent tooltip for the actively viewed section
  showActiveTooltip: false,
  
  // Shows a navigation bar for each landscape slider
  slidesNavigation: false,
  
  // Defines the position for the landscape navigation bar ('top' or 'bottom')
  slidesNavPosition: 'bottom',

  // ==========================================
  // SCROLLING BEHAVIOR
  // ==========================================
  
  // Defines whether to use CSS3 transforms or JavaScript for scrolling
  css3: true,
  
  // Sets the speed in milliseconds for scrolling transitions
  scrollingSpeed: 700,
  
  // Defines whether to use automatic scrolling or normal browser scrolling
  autoScrolling: true,
  
  // Determines whether to fit sections to the viewport
  fitToSection: true,
  
  // Delays the fitting by the configured milliseconds
  fitToSectionDelay: 1000,
  
  // Determines whether to use a scroll bar for the vertical sections
  scrollBar: false,
  
  // Defines the transition effect for vertical and horizontal scrolling
  easing: 'easeInOutCubic',
  
  // Defines the transition effect when using CSS3 transforms
  easingcss3: 'ease',
  
  // Defines whether scrolling up in the first section scrolls to the last one
  loopTop: false,
  
  // Defines whether scrolling down in the last section scrolls to the first one
  loopBottom: false,
  
  // Defines whether horizontal sliders loop after reaching the last slide
  loopHorizontal: true,
  
  // Avoids auto-scroll when scrolling over specific elements (e.g., maps)
  normalScrollElements: '#map, .scrollable-div',
  
  // Creates a scrollbar for sections with content larger than the viewport height
  scrollOverflow: true,
  
  // Uses a Mac-style scrollbar on Windows computers
  scrollOverflowMacStyle: false,
  
  // Determines whether to skip the scroll animation between non-consecutive sections
  skipIntermediateItems: false,
  
  // Defines how to scroll to a section larger than the viewport ('top', 'bottom', null)
  bigSectionsDestination: null,

  // ==========================================
  // ACCESSIBILITY & INTERACTION
  // ==========================================
  
  // Defines if the content is navigable using the keyboard
  keyboardScrolling: true,
  
  // Defines the swipe distance percentage required to navigate on touch devices
  touchSensitivity: 5,

  // ==========================================
  // DESIGN & LAYOUT
  // ==========================================
  
  // Determines whether to use control arrows for the horizontal slides
  controlArrows: true,
  
  // Defines the HTML structure for the left and right control arrows
  controlArrowsHTML:[
    '<div class="fp-arrow"></div>', 
    '<div class="fp-arrow"></div>'
  ],
  
  // Centers the content vertically using flexbox
  verticalCentered: true,
  
  // Defines the CSS background color property for each section
  sectionsColor:['#1a1a2e', '#16213e', '#0f3460', '#533483'],
  
  // Defines the top padding for each section (useful for fixed headers)
  paddingTop: '0px',
  
  // Defines the bottom padding for each section (useful for fixed footers)
  paddingBottom: '0px',
  
  // Defines which elements are taken off the scrolling structure to remain fixed
  fixedElements: '#header, .footer',
  
  // Adjusts section height when the mobile navigation bar changes size
  adjustOnNavChange: true,
  
  // Switches to normal scrolling under the defined width in pixels
  responsiveWidth: 0,
  
  // Switches to normal scrolling under the defined height in pixels
  responsiveHeight: 0,

  // ==========================================
  // CUSTOM SELECTORS
  // ==========================================
  
  // Defines the JavaScript selector used for the plugin sections
  sectionSelector: '.section',
  
  // Defines the JavaScript selector used for the plugin slides
  slideSelector: '.slide',

  // ==========================================
  // MEDIA & OBSERVERS
  // ==========================================
  
  // Lazy loads media elements containing the data-src attribute
  lazyLoading: true,
  
  // Specifies the number of adjacent sections/slides to lazy-load
  lazyLoadThreshold: 0,
  
  // Observes changes in the HTML structure and updates the plugin automatically
  observer: true,

  // ==========================================
  // PREMIUM EXTENSIONS (Requires Extension Files)
  // ==========================================
  
  // Defines whether scrolling down in the last section scrolls to the first one continuously
  continuousVertical: false,
  
  // Defines whether sliding right in the last slide slides to the first one continuously
  continuousHorizontal: false,
  
  // Defines whether to slide horizontally using the mouse wheel
  scrollHorizontally: false,
  
  // Determines whether moving one slider forces other sliders to move
  interlockedSlides: false,
  
  // Enables dragging and flicking of sections using a mouse or touch
  dragAndMove: false,
  
  // Provides a way to use non-fullscreen sections based on percentage
  offsetSections: false,
  
  // Defines whether to reset every slider after leaving its section
  resetSliders: false,
  
  // Defines whether to use a fading effect instead of scrolling
  fadingEffect: false,
  
  // Scrolls up the content of a section when leaving it
  scrollOverflowReset: false,
  
  // Turns slides into vertical sections when responsive mode fires
  responsiveSlides: false,
  
  // Enables the cinematic slider effects on sections
  cinematic: false,
  
  // Configures the parameters for the cinematic animation
  cinematicOptions: { in: 'zoomIn', out: 'zoomOut' },
  
  // Enables the slider effects on sections
  effects: false,
  
  // Configures the parameters for the slider effects
  effectsOptions: { type: 'focus' },
  
  // Defines whether to use parallax background effects
  parallax: false,
  
  // Configures the parameters for the parallax effect
  parallaxOptions: { type: 'reveal', percentage: 62, property: 'translate' },
  
  // Defines whether to use the drop effect on sections
  dropEffect: false,
  
  // Configures the parameters for the drop effect
  dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999 },
  
  // Defines whether to use the water effect on sections
  waterEffect: false,
  
  // Configures the parameters for the water effect
  waterEffectOptions: { animateContent: true, animateOnMouseMove: true },
  
  // Defines whether to use the cards effect on sections
  cards: false,
  
  // Configures the parameters for the cards effect
  cardsOptions: { perspective: 100, fadeContent: true, fadeBackground: true }

});

10. Callback functions.

new fullpage('#site', {
  licenseKey: 'YOUR_LICENSE_KEY',

  // Fires just before a section transition starts.
  // Return false to block the scroll from happening.
  beforeLeave: function (origin, destination, direction, trigger) {
    // origin and destination are Section objects: { anchor, index, item, isFirst, isLast }
    // direction: 'up' or 'down'
    // trigger: 'wheel', 'keydown', 'menu', 'slideArrow', 'verticalNav', 'horizontalNav'
    if (destination.index === 3 && !userIsAuthenticated) {
      return false; // Block navigation to the 4th section
    }
  },

  // Fires as the user leaves a section, during the transition.
  // Return false here as well to cancel the move.
  onLeave: function (origin, destination, direction, trigger) {
    console.log('Leaving section ' + origin.anchor + ' going ' + direction);
  },

  // Fires after a section has fully loaded and the scroll animation has ended.
  afterLoad: function (origin, destination, direction, trigger) {
    if (destination.anchor === 'work') {
      initPortfolioAnimations(); // Safe to run animations after the section is visible
    }
  },

  // Fires once after fullPage.js has built the DOM structure.
  // This is the correct place to initialize third-party plugins.
  afterRender: function () {
    initLightbox(); // Initialize after fullPage.js restructures the DOM
  },

  // Fires after the browser window is resized and sections have recalculated their dimensions.
  afterResize: function (width, height) {
    console.log('Viewport is now ' + width + 'x' + height);
  },

  // Fires after fullpage_api.reBuild() completes.
  afterReBuild: function () {
    console.log('fullPage.js structure has been rebuilt');
  },

  // Fires when the library enters or exits responsive mode.
  afterResponsive: function (isResponsive) {
    console.log('Responsive mode active: ' + isResponsive);
  },

  // Fires after a horizontal slide has fully loaded.
  // section: active vertical Section object
  // origin: the slide scrolled from
  // destination: the slide scrolled to
  // direction: 'left' or 'right'
  afterSlideLoad: function (section, origin, destination, direction, trigger) {
    if (section.anchor === 'work' && destination.index === 1) {
      playProjectVideo();
    }
  },

  // Fires as the user leaves a horizontal slide.
  // Return false to cancel the slide move.
  onSlideLeave: function (section, origin, destination, direction, trigger) {
    if (section.index === 0 && origin.index === 0 && direction === 'left') {
      return false; // Prevent sliding left on the first slide of the first section
    }
  },

  // Fires when the user scrolls inside a section that has scrollOverflow enabled.
  // position: scroll amount in pixels from the top of the section content
  onScrollOverflow: function (section, slide, position, direction) {
    if (position > 300 && direction === 'down') {
      showReadMoreButton();
    }
  },
});

11. API methods.

// Scroll one section upward
fullpage_api.moveSectionUp();

// Scroll one section downward
fullpage_api.moveSectionDown();

// Scroll to a specific section and slide
// Section accepts an anchor string or a 1-based index; slide uses a 0-based index
fullpage_api.moveTo('work', 1);      // Second slide (index 1) of the 'work' section
fullpage_api.moveTo(3);              // Jump to the 3rd section, first slide

// Same as moveTo() but skips the scroll animation — instant jump
fullpage_api.silentMoveTo('contact', 0);

// Advance the horizontal slider of the current section one slide to the right
fullpage_api.moveSlideRight();

// Advance the horizontal slider of the current section one slide to the left
fullpage_api.moveSlideLeft();

// Get an object describing the currently active section
// Returns: { anchor, index, item, isFirst, isLast }
fullpage_api.getActiveSection();

// Get an object describing the currently active horizontal slide
fullpage_api.getActiveSlide();

// Get the current vertical scroll position of the fullPage wrapper
fullpage_api.getScrollY();

// Get the current horizontal scroll position of the active slide
fullpage_api.getScrollX();

// Toggle auto-scrolling on or off at runtime
fullpage_api.setAutoScrolling(false);

// Toggle whether the active section snaps to fill the viewport
fullpage_api.setFitToSection(false);

// Force-snap to the nearest section immediately
fullpage_api.fitToSection();

// Prevent URL anchors from triggering scroll
fullpage_api.setLockAnchors(true);

// Enable or disable scroll gestures (mouse wheel and touch)
// Optional second argument restricts the direction: 'up', 'down', 'left', 'right', or 'all'
fullpage_api.setAllowScrolling(false, 'down');

// Enable or disable keyboard navigation per direction
fullpage_api.setKeyboardScrolling(false, 'down, right');

// Toggle browser history recording for hash changes
fullpage_api.setRecordHistory(false);

// Update transition speed at runtime
fullpage_api.setScrollingSpeed(500);

// Switch into or out of responsive (normal scroll) mode programmatically
fullpage_api.setResponsive(true);

// Rebuild the DOM structure after external changes or AJAX-loaded content
fullpage_api.reBuild();

// Remove all fullPage.js event listeners
fullpage_api.destroy();

// Remove all event listeners AND strip all fullPage.js HTML/CSS modifications
fullpage_api.destroy('all');

// (Extension) Convert horizontal slides to vertical sections
fullpage_api.responsiveSlides.toSections();

// (Extension) Revert vertical sections back to horizontal slides
fullpage_api.responsiveSlides.toSlides();

12. Available HTML data attributes.

data-anchor: Defines an anchor directly on a section or slide.
data-src: Defers image, iframe, video, audio, or source loading.
data-srcset: Defers responsive image sources.
data-autoplay: Plays supported media when its section or slide loads.
data-keepplaying: Keeps supported media playing after leaving the section or slide.
active: Marks the current section, slide, or menu item.
fp-loaded: Marks a section or slide that triggered lazy loading.
fp-responsive: Appears on the body in responsive mode.
fp-enabled: Appears on the html element after initialization.
fp-destroyed: Appears on the container after destroy runs.

Basic Example:

This example creates three full screen sections, enables right-side navigation dots, and assigns URL anchors to each section.

<div id="fullpage">
  <section class="section">
    <h1>Overview</h1>
  </section>
  <section class="section">
    <h1>Features</h1>
  </section>
  <section class="section">
    <h1>Contact</h1>
  </section>
</div>

new fullpage('#fullpage', {
  licenseKey: 'YOUR_LICENSE_KEY',
  anchors: ['overview', 'features', 'contact'],
  navigation: true,
  navigationPosition: 'right'
});

Menu And Horizontal Slides Example:

Use anchors with menu when a fixed menu should follow the active section. Add elements with the slide class inside a section to create a horizontal slider.

<ul id="site-menu">
  <li data-menuanchor="intro"><a href="#intro">Intro</a></li>
  <li data-menuanchor="work"><a href="#work">Work</a></li>
  <li data-menuanchor="contact"><a href="#contact">Contact</a></li>
</ul>

<div id="fullpage">
  <section class="section">Intro content</section>
  <section class="section">
    <div class="slide" data-anchor="case-study">Case study</div>
    <div class="slide" data-anchor="gallery">Gallery</div>
  </section>
  <section class="section fp-auto-height">Contact content</section>
</div>

new fullpage('#fullpage', {
  licenseKey: 'YOUR_LICENSE_KEY',
  menu: '#site-menu',
  anchors: ['intro', 'work', 'contact'],
  slidesNavigation: true,
  controlArrows: true,
  scrollingSpeed: 700
});

Callbacks And API Example:

Callbacks return section and slide state after navigation changes. API methods let custom buttons, menus, forms, or controls move the page.

<button id="next-section" type="button">Next section</button>

new fullpage('#fullpage', {
  licenseKey: 'YOUR_LICENSE_KEY',
  anchors: ['intro', 'details', 'signup'],

  afterLoad: function(origin, destination, direction, trigger) {
    console.log('Current section:', destination.anchor);
  },

  onLeave: function(origin, destination, direction, trigger) {
    console.log('Leaving section index:', origin.index);
  }
});

document.getElementById('next-section').addEventListener('click', function() {
  fullpage_api.moveSectionDown();
});

jQuery Initialization:

fullPage.js still exposes a jQuery adapter when jQuery loads before fullpage.js. New projects can use the vanilla JavaScript syntax above. Older jQuery projects can keep this pattern.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>

$(function() {
  $('#fullpage').fullpage({
    licenseKey: 'YOUR_LICENSE_KEY',
    autoScrolling: true,
    navigation: true
  });

  $.fn.fullpage.setAllowScrolling(true);
});

License Key And Extension Activation:

fullPage.js uses dual licensing. GPLv3 applies to open-source projects released under a compatible license. Closed-source websites, themes, applications, and client projects need a commercial license. Add the assigned key through licenseKey in every initialization.

Each paid extension also needs its own domain activation key. The extension activation key does not replace the core fullPage.js license key. localhost and 127.0.0.1 do not need an extension activation key. Other development or staging domains need a license plan that supports extra domain activations.

Alternatives And Related Resources:

FAQs:

Q: Does fullPage.js require jQuery?
A: No. Version 4 uses a native JavaScript constructor. Load jQuery first only when an existing project needs the optional $('#fullpage').fullpage() adapter.

Q: Is a license key required?
A: Yes. Pass a valid licenseKey during initialization. Compatible open-source projects use a GPLv3 key. Closed-source projects use a commercial key.

Q: Why does an extension show an unlicensed warning?
A: Extensions need a domain-specific activation key in addition to the core licenseKey. Use an option named after the extension, such as scrollHorizontallyKey. Localhost and 127.0.0.1 do not need extension activation.

Q: Why does another plugin stop working after fullPage.js starts?
A: fullPage.js changes the DOM structure during initialization. Start DOM-dependent plugins inside afterRender so they read the final elements.

Q: How do I update fullPage.js after AJAX adds a section?
A: The default observer: true setting handles normal section and slide changes. Call fullpage_api.reBuild() after a larger layout or content update that needs immediate dimension recalculation.

Q: Why is the URL hash not changing?
A: Define unique anchors through anchors or data-anchor. Keep lockAnchors off. Keep recordHistory on when section changes must create browser history entries.

Changelog:

v4.0.41 (2026-03-04)

Added the cinematic option for the Cinematic extension.
Fixed a regression that ignored section padding.

v4.0.40 (2025-12-15)

Added right-to-left layout support.
Added TypeScript declaration files.
Reduced accidental horizontal swipe navigation.

v4.0.38 (2025-12-12)

Added horizontal slide navigation through a trackpad or Shift plus mouse wheel.
Fixed internal anchor links that interrupted fullPage.js navigation.
Created scrollOverflow containers for dynamically inserted sections.
Improved overflow cleanup during destroy() and URL cleanup during destroy('all').

v4.0.35 (2025-04-01)

Added the effects option for the Effects extension.
Fixed custom horizontal arrow direction handling.

v4.0.34 (2025-03-03)

Added the fp-loaded state class for lazy-loaded sections.
Fixed viewport resizing with scrollBar: true.
Improved destroy('all') cleanup.

v4.0.33 (2025-01-27)

Added adjustOnNavChange for mobile address-bar and navigation-bar height changes.

v4.0.30 (2024-10-15)

Improved automatic playback for HTML5 video and audio elements.

v4.0.28 (2024-08-24)

Added lazyLoadThreshold to preload media in adjacent sections and slides.

v4.0.27 (2024-08-19)

Added skipIntermediateItems for direct moves between non-consecutive sections or slides.

v4.0.14 (2022-11-12)

Added support for extra development and staging domains in extension activation plans.

v4.0.11 (2022-09-08)

Improved automatic handling of dynamic content inside scrollOverflow sections.
Improved keyboard tab navigation between panels.
Changed section fitting from CSS Snap behavior back to the library's JavaScript implementation.

v4.0.0 (2022-04-12)

Added customizable horizontal navigation arrows through controlArrowsHTML.
Added automatic DOM observation through observer.
Integrated overflow scrolling into the core library and removed the separate scrolloverflow.min.js dependency.
Added beforeLeave, callback trigger arguments, onScrollOverflow, getScrollY(), and getScrollX().
Moved vertical centering to flexbox and section sizing to 100vh.
Changed the license and extension activation systems and added the credits option.
Added scrollOverflowMacStyle and custom overflow behavior for dynamically changing content.
Removed IE 9 compatibility and several v3 compatibility options.

v3.1.2 (2021-06-25)

Added the Water Effect extension with waterEffect and waterEffectOptions.

v3.1.0 (2021-02-18)

Added the Drop Effect extension with dropEffect and dropEffectOptions.
Fixed responsive callback and URL anchor update behavior.

v3.0.5 (2019-04-11)

Added the Cards extension with cards and cardsOptions.
Improved runtime method access, history recording, and scroll-overflow behavior.

v2.9.4 (2017-03-11)

Added lazy loading for responsive image srcset values.

v2.9.3 (2017-03-01)

Added the Parallax extension.

v2.6.6 (2015-06-08)

Added lockAnchors, responsiveHeight, and the current responsiveWidth behavior.
Added directional keyboard locking and pre-transition cancellation.
Added lazy loading for images, video, and audio.
Added automatic media playback and pause behavior when panels enter or leave the viewport.

v2.6.5 (2015-05-01)

Added silent section navigation and npm installation documentation.
Improved anchor links to sections and slides.

This awesome jQuery plugin is developed by alvarotrigo. For more Advanced Usages, please check the demo page or visit the official website.