Horizontal & Vertical One Page Scroll Plugin - jQuery fsscroll

fsscroll is a lightweight (<4kb minified), fast jQuery one page scroll plugin to help you create a responsive fullscreen page slider/carousel that supports both horizontal and vertical directions.

More features:

• Infinite loop.
• Scrolls through page sections with mouse wheel and/or keyboard arrows.
• Smart pagination links.
• Callback functions.

How to use it:

1. Create sections for the page slider and insert them into a container with the data-fs-scroll attribute.

<div class="container" data-fs-scroll>
  <div class="sections">
    <div class="section section0">
      <h1>Page Section 1</h1>
    </div>
    <div class="section section1">
      <h1>Page Section 2</h1>
    </div>
    <div class="section section2">
      <h1>Page Section 3</h1>
    </div>
    <div class="section section3">
      <h1>Page Section 4</h1>
    </div>
    ...
  </div>
</div>

2. Load jQuery library (slim build) together with the stylesheet jquery.fsscroll.css and JavaScript jquery.fsscroll.js in the html file.

<link rel="stylesheet" href="jquery.fsscroll.css">
<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="jquery.fsscroll.js"></script>

3. Make the page sections fullscreen.

html, body {
  height: 100%;
  overflow: hidden;
}

.container, .sections, .section {
  position: relative;
  height: 100%;
}

4. Initialize the fsscroll plugin. Done.

$('.container').fsScroll()

5. Enable the infinite loop. Default: false. It means that the slider will back to the first page when you reach the last one.

$('.container').fsScroll({
  loop: true
})

6. Enable keyboard interactions. Default: false.

$('.container').fsScroll({
  keyboard: true
})

7. Change the default direction. Default: 'vertical'.

$('.container').fsScroll({
  direction: false // horizontal
})

8. Config the duration of the animation. Default: 500ms.

$('.container').fsScroll({
  duration: 1000
})

9. Set the easing function. Default: 'ease'.

$('.container').fsScroll({
  timing: 'linear'
})

10. Set the start index. Default: 0.

$('.container').fsScroll({
  index: 1 // slide 2
})

11. Default selectors.

$('.container').fsScroll({
  selectors: {
    sections: '.sections',
    section: '.section',
    page: '.page',
    active: '.active'
  }
})

12. Available callbacks which will be fired before/after scroll.

$('.container').fsScroll({
  beforeScroll: function(el, index) {
    // do something
  },

  afterScroll: function(el, index) {
    // do something
  }
})

---

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