Slidenav

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

Usage

To create a navigation with previous and next buttons, just add the 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.

<a href="" uk-slidenav-next></a> <a href="" uk-slidenav-previous></a>

<a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></a>

Large modifier

To increase the size of the slidenav icons, add the .uk-slidenav-large class.

<a href="" class="uk-slidenav-large" uk-slidenav-next></a>
<a href="" class="uk-slidenav-large" uk-slidenav-previous></a>

<a href="#" class="uk-slidenav-large" uk-slidenav-previous></a>
<a href="#" class="uk-slidenav-large" uk-slidenav-next></a>

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.

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

<div class="uk-slidenav-container">
  <a href="" uk-slidenav-previous></a>
  <a href="" uk-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 .uk-position-* classes from the Position component. To create a position context on the container, add the .uk-position-relative class.

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

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

Note You can also apply the Visibility component, so that the slidenav only appears on hover.

<div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow>
  <ul class="uk-slideshow-items">
    <li>
      <img src="/images/photo.jpg" alt="" uk-cover />
    </li>
    <li>
      <img src="/images/dark.jpg" alt="" uk-cover />
    </li>
    <li>
      <img src="/images/light.jpg" alt="" uk-cover />
    </li>
  </ul>

  <a
    class="uk-position-center-left uk-position-small uk-slidenav-large uk-hidden-hover text-muted-foreground"
    href="#"
    uk-slidenav-previous
    uk-slideshow-item="previous"
  ></a>
  <a
    class="uk-position-center-right uk-position-small uk-slidenav-large uk-hidden-hover text-muted-foreground"
    href="#"
    uk-slidenav-next
    uk-slideshow-item="next"
  ></a>
</div>

Theme development

On your tailwind.config.js file, add the Slidenav component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        slidenav: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook Name	Affected Classes
`hook-slidenav`	`.uk-slidenav`
`hook-hover`	`.uk-slidenav:hover`
`hook-active`	`.uk-slidenav:active`
`hook-previous`	`.uk-slidenav-previous`
`hook-next`	`.uk-slidenav-next`
`hook-large`	`.uk-slidenav-large`
`hook-container`	`.uk-slidenav-container`
`hook-misc`	`*`