Get new jQuery plugins just once a week

×

horizonScroll-js

March 11, 2015

HorizonScroll-js | A jQuery plugin to scroll screen left and right horizontally.

HorizonScroll-js is a jQuery plugin that allows for websites to scroll left and right horizontally.

Created by Anthony Graglia

Download

Example

horizonScroll-js jQuery plugin

left and right

jquery.horizonScroll.js - Horizontal Scrolling (Paging) Websites

This is a jQuery plugin which allows for websites to page(scroll by set width) left and right horizontally. Horizontal scroll sites offer a new and unique way to develope sites! Check it out and give feedback! THX

Demo

Click here for the demo

Usage

Initial usage. All elements specified by the selector become a page.

$('selector').horizon();

If you do not want to use jquery.swipeTouch.js for swipe left and right:

$('selector').horizon({swipe: false});

Additional plugin options and their default values:

$.fn.horizon.defaults = {
    scrollTimeout: null,
    scrollEndDelay: 250,
    scrollDuration: 400,
    i: 0,
    limit: 0,
    docWidth: 0,
    sections: null,
    swipe: true,
    fnCallback: function (i) {}
};

You can invoke a left page scroll, right page scroll or page scroll to a page index. This helps if you would like to bind to additional elements on the page. The selector here is ignored.

$(document).horizon('scrollRight');
$(document).horizon('scrollLeft');

// As of 1.1.0, i can be an integer with or without quotes in order to scroll to an index.
// Or i can be a string of an element id to scroll to.
$(document).horizon('scrollTo', i); 

Changelog

1.1.0: - Added support for element IDs using scrollTo() - Added support for animating the scroll to a section via hash links - Updated sample index.html - Updated readme

Notes and References

http://stackoverflow.com/questions/4989632/differentiate-between-scroll-up-down-in-jquery http://stackoverflow.com/questions/4289473/javascript-do-an-action-after-user-is-done-scrolling http://stackoverflow.com/questions/175739/is-there-a-built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number

horizonScroll-js

Related posts:

Liquid Slider
Tikslus Carousel
lightSlider
horizonScroll-js jQuery plugin

http://jquer.in/wp-content/uploads/2015/03/horizonScroll-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever