Slidenav

Defines a navigation with previous and next buttons to flip through slideshows.

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Table of contents

Usage

To create a navigation with previous and next buttons, just add the data-uk-slidenav attribute to <a> elements. Add the previous or next parameter to the attribute to style the nav items as previous or next buttons.

Slidenav container

To display a conjoint slidenav, wrap the slidenav items inside a <div> element and add the .uk-slidenav-container class, as well as one of the .uk-position-* classes.

Position as overlay

To position the slidenav on top of an element or the Slideshow component for example, just add one of the .uk-position-* classes from the Position component. To create a position context on the container, add the .uk-position-relative class.

Customize

Customize your Franken UI experience.