Get new jQuery plugins just once a week



September 16, 2014

Full Screen Vertical Scroll

FSVS is a simple Full Screen Vertical Slider using CSS3 transitions followed up by a jQuery fallback.

Created by Luke Snowden



FSVS jQuery plugin

vertical scroll


Send a pull request to add your projects to the showcase list

FSVS2 (BETA) on development branch

link: demo:

I am currently having issues trying to hijack the screen on scroll for mobiles. If anyone cares to try and accomplish this as I've currently ran out of ideas, it would be greatly appreciated and you will be accredited for it.

FSVS - Full Screen Vertical Scroller

more information

initiate the plugin:

$(document).ready( function() {
    var slider = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseWheelDelay : false,
        scrollableArea : 'scrollable',
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    //slider.slideToIndex( index );

Basic HTML structure

(please note that the fsvs class is needed on the HTML tag)

<!doctype html>
<html class="fsvs" lang="en">
        <link href="assets/css/style.css" media="all" rel="stylesheet" type="text/css" />
        <script src="//"></script>
        <script src="//"></script>
        <script src="assets/js/bundle.js"></script>
        <div id="fsvs-body">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>

Related posts:

Unlimited Twitter Scroll
Block Scroll
FSVS jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas