Search code examples
javascripthorizontal-scrollingsmooth-scrolling

Best way to create a side-scrolling inline element?


I am attempting to get out of amateur status, so forgive any false assumptions or silly questions.

I am interested in updating my web site http://scenicdesktops.com, so that instead of the old-school inline element that scrolls in a traditional manner (independent of the rest of the page), I would like to implement a movable inline element with smooth, side-to-side, page-to-page style scrolling. I would like to do this using side buttons, which, when clicked, would result in a smooth, moving transition of this middle section to the next / previous page.

It would also be convenient to have page links at the bottom which move the middle section strait to that specific page, all with the same smooth side-to-side motion.

I am a fan of minimalistic code, so the lighter the better. Perhaps I might need jquery or mootools for this, but my know-how ends right about there. Can anyone point me in the right direction?


Solution

  • Use jQuery and jQuery Tools, then you can:

    $(".scrollable").scrollable();
    

    (very minimalistic)

    See http://flowplayer.org/tools/demos/scrollable/index.html for a demo