0build.dev
Playground

Slidenav

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

Report an IssueContexts

Table of contents

Usage

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

<a href="" data-z-slidenav-previous></a>
<a href="" data-z-slidenav-next></a>

Slidenav container

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

<div class="z-slidenav-container">
  <a href="" data-z-slidenav-previous></a>
  <a href="" data-z-slidenav-next></a>
</div>

Position as overlay

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

<div class="z-position-relative">
  <!-- The element which is wrapped goes here -->

  <a class="z-position-center-left" href="" data-z-slidenav-previous></a>
  <a class="z-position-center-right" href="" data-z-slidenav-next></a>
</div>