Navigation

Dots

Slides use navigation dots to help your site visitors jump to different sections and pages in your website. In Slides, these nav dots are generated by js code automatically inside <ul> tags, so you don’t need to create them yourself. The number of dots depends on the number of slides you’ve included, as long as the code shown below exists:

<nav class="side">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>

Numbers

You can also use Numbers as a style for your navigation by adding numbers on the navigation element.

<nav class="side">
  <div class="navigation numbers">
    <ul></ul>
  </div>
</nav>

Position

By default, dots appear on the right side of a web page. You can move them to the left by adding a class left on your side element.

<nav class="side left">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>

Size

You have the option to choose between default, medium and small.

<nav class="side medium">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>

Style

You have the option to choose between circle (default) dots, square, diamond, line, and pole shaped dots. To change the appearance of unselected dots to an outline look, add the class stroke in your code, however, it will work on only default, square, and diamond ones:

<nav class="side square stroke">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>

Horizontal

For horizontal slides, you might want to add your navigation dots inside a panel on your page. This will work fine as long as you include a <div class="navigation default"><ul></ul></div>. Wrap the navigation element with any tag to control the size, shape, and stroke, as shown here:

<nav class="panel bottom">
  <div class="sections">
    <div class="center">
      <nav class="medium diamond stroke">
        <div class="navigation default"><ul></ul></div>
      </nav>
    </div>
  </div>
</nav>

Tooltip

You can add tooltips on hover on navigation dots simply by adding data-title="Tooltip Name" on your slides.

<section class="slide" data-title="Tooltip Name">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

Compact View

If you have so many slides on your page that all the nav dots won’t fit on a side panel, the slides.js script will automatically set your side element appearance to a Compact view. You can also change your navigation by default to compact by adding a compact class:

<nav class="side compact">
  <div class="navigation default">
    <ul></ul>
  </div>
</nav>

Navigation Classes

You might need to use navigation controls (next and previous buttons) for your slides. To do that, use the class nextSlide and prevSlide on any element you want:

<div class="nextSlide">Next</div>
<div class="prevSlide">Back</div>
<div class="toFirstSlide">Start</div>
<div class="toLastSlide">End</div>
<div class="toSlide-5">Slide 5</div>

Exclude from Navigation

You can exclude some slides from navigation by adding exclude class on your slide element.

<!-- Slide will be shown but ignored from side menu navigation -->
<section class="slide exclude">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

You can assign excluded slides to a parent slide to group them together. Add attribute data-slide-id="unique-id" to a parent slide element and data-parent-slide-id="unique-id" to link them together.

<!-- Parent slide -->
<section class="slide" data-slide-id="unique-id">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

<!-- Excluded from navigation -->
<section class="slide exclude" data-parent-slide-id="unique-id">
  <div class="content">
    <div class="container">
      <div class="wrap">

        <!-- Slide contents -->

      </div>
    </div>
  </div>
</section>

Example.

Turn off the arrow keys navigation

You can disable the default arrow keys navigation with the following JS parameter:

<script>
  window.disableKeyNavigation = 1;
</script>