10 jQuery Horizontal Scroll Demos & Plugins

Sam Deering

In today’s post we bring to you 10 jQuery Horizontal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :)

1. Smooth Vertical or Horizontal Page Scrolling with jQuery

In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect.

Smooth-Vertical-Horizontal-Page-Scroll.jpg
SourceDemo

2. Horizontal Scrolling with jQuery [Updated]

To get horizontal scrolling the Mouse Wheel Plugin by Brandon Aaron (GitHub, Download) will be used to detect mouse wheel movements like a keypress and of course, jQuery itself will be used.

Horizontal-Scrolling-with-jQuery.jpg
SourceDemo

3. Mouse Wheel Event in HTML5 Pages

Supporting the mouse wheel can add further interactivity to your HTML5 web pages. Rather than scrolling the page, you could perform a different action such as zooming in or out.

Mouse-Wheel-Event-in-HTML-5-Page.jpg
SourceDemo

4. Horizontal content scroll with jQuery

In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. We will use HTML and CSS for the layout and jQuery for the scrolling.

Horizontal-Content-Scroll-with-jQuery.jpg
SourceDemo

5. jQuery Horizontal automatic Scrollbars with mouse

We all know that horizontal scrollbars are hideous. So, wouldn’t it be nice if we had a simple way to represent horizontal overflow? The jQuery horizontal scrollbar is very easy to implement. Feel free to check out the demo and download the source code.

Horizontal-Auto-Scollbars-with-Mouse.jpg
SourceDemo

6. jQuery mousewheel easing horizontal scrolling

Learn how to create jQuery mousewheel easing horizontal scrolling in this tutorial.

Mousewheel-Easing-Horizontal-Scrolling.jpg
SourceDemo

7. simplyScroll v2

A scroll-tastic jQuery plugin that can animate (scroll) content either automatically or manually, horizontally or vertically, backwards or forwards.

simplyScroll.jpg
Source + Demo

8. Portfoliojs

It is a lightweight jQuery gallery plugin for your beautiful images with horizontal scrolling which supports desktop, tablet and mobile browsers.

Portfoliojs.jpg
Source + Demo

9. Sly

It is a jQuery plugin for one-directional scrolling simulation with item based navigation support and lots of other goodies.

Sly.jpg
Source + Demo

10. Smooth Div Scroll jQuery Plugin

is a jQuery plugin that scrolls content horizontally left or right. Smooth Div Scroll does not limit the scrolling to distinct steps.

Smooth-Div-Scroll.jpg
SourceDemo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • David

    Thank you for this! I’ve been looking all over the place for a post like this one. Excellent selection here, will definitely use them in future projects.

  • Rizaldi

    It’s great, Thank you for sharing!

  • Vivek Moyal

    Thank You …….. you helped me

    • http://jquery4u.com/ jQuery4u

      Thanks

  • Larry Wall

    NICE!!!

    • http://jquery4u.com/ jQuery4u

      Thanks! Nice tat!

  • Pingback: jQuery learning — top to button and float window | My Blog

  • Sony

    awesome!!!!!!

  • rama krishna

    very nice and helpful

  • Pingback: » Blog Archive » 10 jQuery Horizonal Scroll Demos & Plugins | jQuery4u

  • http://Advocatesandhyagupta.com Sumiran Kumar

    Hey all..
    Anybody can tell me .

    I am using a slider, & all slider load/merge on refresh page,
    So how to set only one slider img on loading time.