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! :)

Updated: March 2016 Updated all plugins and demos with the latest versions and added some new ones. Also removed plugins which aren’t in development anymore.

1. ScrollMagic

Image of a top hat

ScrollMagic helps you to easily react to the user’s current scroll position. Its lightweight (6KB gzipped) and mobile friendly. It has support for both scroll directions.

See the demo

2. jInvertScroll

Screenshot of jInvertScroll homepage

jInvertScroll is a lightweight plugin for jQuery that allows you to move in the horizontal with a parallax effect while scrolling down.

See the demo

3. Horizontal Timeline

Mock-up of timeline screen

This tutorial will teach you to create an easy to customise, horizontal timeline powered by CSS and jQuery.

See the demo

4. Smooth Horizontal Scrolling with jQuery

Screenshot of the demo

This tutorial will teach you how to create a simple smooth scrolling effect using the jQuery Easing Plugin and just a few lines of jQuery.

See the demo

5. simplyScroll

Screenshot of a simplyScroll demo

simplyScroll is a flexible jQuery content scroller with touch support. It automatically supports unequal sized elements in loop mode.

See the demo

6. Horizontal Scrolling with fullPage.js

Homepage screenshot for fullPage.js

fullPage.js is a jQuery-based plugin which allows us to build one-page scrolling websites. It not only works in all modern browsers, but also in some older ones like IE 8 and Opera 12.

See the demo

7. jQuery.kinetic

Banner image for jQuery.kinetic

jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.

See the demo

8. Sly

Screenshot of Sly homepage

Sly is JavaScript library for one-directional scrolling with item-based navigation support. It can be used as a simple scroll bar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites.

See the demo

9. pagePiling.js

Screenshot of pagePiling.js homepage

pagePiling.js is a jQuery plugin that helps to pile up your sections one over another and access them by scrolling or by URL. It is fully compatible with old browsers such as IE8 and Safari 12 and also works perfectly on mobile devices.

See the demo

10. Horizontal Scroll Tutorial

This tutorial will teach you to scroll your web content vertically, horizontally and even diagonally! Don’t worry, it won’t rely on JavaScript too much. It uses CSS/HTML for the layout and JavaScript only for the scrolling.

See the demo

Conclusion

This article reviewed a list of the 10 most used jQuery Horizontal Scroll Demos and Plugins. I hope you’ll find them useful for your projects. Do you know other plugins which could help? What do you use? Feel free to share your opinions and suggestions in the comments below.

Tags: jquery
Ritesh is a web designer and developer having a degree in electrical engineering from IIT Roorkee. He loves learning about the new web technologies and getting familiar with new people. When he is not coding, you can find him playing video games.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • 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.

  • Jules

    I need to add an image (picture) scrolling mechanism to my daughter’s web page. She wants to display her tee shirt designs, one at a time for a few seconds (setable value) and also have the ability to manually change to the previous or next picture manually by clicking on the left or right arrow. I have been searching online for many hours, trying things. I would appreciate a basic example from which I could figure out how to do this. I have written HTML and Javascript in the past, but am extremely rust. I write C code at my job, so I have written lots of code.
    I would love to write and test it on my PC, pulling the images from the hard drive to test it before I add it to her web page. Thank you.

  • M S i N Lund

    Also, here is an new plugin for jquery-automobile that allows you to switch functions between the brake and gas -pedals.

    Great fun!

    Of course it should be used with care…

  • Md Rayhan

    Thanks you very much

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.