This demo uses some of the advanced features of the jQuery Cycle plugin to create a mixed content slideshow (html/text/images) with a visual navigation bar, and next/back arrows
In this setup, the slideshow advances automatically, until somebody clicks one of the links, which stops the automatic action and allows the user to control the advancement of the slides. (The Cycle plugin allows for pausing, resuming or stopping the slideshow with a simple click action - see the Cycle Plugin demos for a number of robust options).
Relative positioning css is used to put the navigation inside the slide content. This type of css positioning may not be 100% cross-browser friendly, rendering the links below the slides instead.
Note: the paging function is called in simply by defining an existing element as the container for the page ( see the jQuery code ). By default, this navigation section has visible numbers in each tab. To achieve the desired effect for this usage, we can simply color the text for the numbers the same as the background of the shaded box for each nav link, making it invisible.