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:
Numbers
You can also use Numbers as a style for your navigation by adding numbers
on the navigation
element.
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.
Size
You have the option to choose between default, medium
and small
.
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:
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:
Tooltip
You can add tooltips on hover on navigation dots simply by adding data-title="Tooltip Name"
on your slides.
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:
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:
Exclude from Navigation
You can exclude some slides from navigation by adding exclude
class on your slide element.
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.
Turn off the arrow keys navigation
You can disable the default arrow keys navigation with the following JS parameter:
Last updated