Horizontal & Vertical One Page Scroll Plugin - jQuery fsscroll
File Size: | 7.93 KB |
---|---|
Views Total: | 13107 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.