UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Scrolly Carousel

In this example, an instance of the Uize.Widget.Scrolly class creates a carousel scrolly that lets you step through a series of pages, with an accompanying JavaScript animation effect. Each "page" has its own div tag containing its HTML, and each page follows the same layout and shares the same CSS. Of course, each page could really be totally different - as long as every page is the width of the scrolly's view node. Imagine such an interface on a company's homepage, with pages like "About Us", "Products", "Services", etc. Click the next and previous navigation arrows (shift-click to scroll all the way to the first or last pages). Below the scrolly are some links to demo the scrolly's programmatic interface.

APPLES
GRAPEFRUITS
MANGOS
PLUMS
STRAWBERRIES

scrolly.get ('pageX') == ''

Set the pageX for the scrolly widget: scrolly.set ({pageX:0})  ,  scrolly.set ({pageX:1})  ,  scrolly.set ({pageX:2})  ,  scrolly.set ({pageX:3})  ,  scrolly.set ({pageX:4})