Custom Tab-based Navigation

This article is now outdated!

A better way to accomplish this now with version 5.0+ is to use Static Layers and Layer Links. Or you can modify customize your slider’s navigation using the techniques shown here and here.



Normally, the slider comes with the options of having thumbnails or bullets for the slider’s navigation. If you want to add tabs, one option is to add the tabs as individual layers to each slide, and then hyperlink the layers to their corresponding slide. A second option is to add the tabs with some custom CSS and JavaScript, which would allow for the tabs to be “static” (not animate in and out with each slide change). Here’s an example:




The JavaScript part can be added to your theme’s “footer.php” file, directly above the closing “</body>” tag. There are two main parts of the script that need to be customized. The first is the “tabText” values shown at the top of the script, and the second is the “revapi12” part, shown toward the bottom. Check out the comments in the script for information about adjusting the “revapi12” part.


The final part is the CSS, which will style our new tabs. Add the CSS to the bottom of your theme’s “style.css” file, or if your theme has a “Custom CSS” option, add it there instead.