Easy for novice, powerful for experienced users

Navigation Types

In the Dottoro theme, sliders support five different types of navigations: navigation buttons (disc, rectangle, numbered, images and custom), previous and next buttons, keyboard navigation, drag and range navigation. You can use any number of these navigation types in any slider and you can use different navigation units for them. There is no limit to your creativity.

Table of contents:

  1. Navigation Buttons
    1. Basic navigation buttons
    2. Basic navigation buttons in a nested slider
    3. Custom navigation buttons
    4. Navigation units
    5. Complex Navigations
  2. Previous and next buttons
    1. Button skins, icons, shapes
    2. Navigation units
  3. Keyboard navigation
  4. Drag support
  5. Range navigation

Key features:

  • You can choose from a couple of predefined navigation button types and you can also create custom ones.
  • There are two supported navigation units for navigations: slide and page.
  • The position of the navigation buttons is determined by the slideshow template so you can easily customize it. You can place the navigation buttons above, over or next to the slides, etc.
  • Navigation buttons can be placed in a nested slider that is extremely helpful for a responsive desing and when there are a lot of navigation buttons.
  • Additionally, navigation sliders can also have navigation buttons that can also be placed in a nested slider, etc.
  • Finally, every slider can have multiple navigations. For instance, a page navigation and a slide navigation.

1.1. Basic navigation buttons

Supported types are:
  • disc
  • rectangle
  • rectangle with numbers
  • images
  • images with frame

You can set the width, height and skin of the navigation buttons and you can select whether you want to display a tooltip over the buttons or not. Additionally, you can set the unit of the navigation as well.

View basic navigations in action

1.2. Basic navigation buttons in a nested slider

Navigation buttons can be placed in a nested slider that is extermaly helpful for a responsive desing and when there are a lot of navigation buttons.

View basic navigations in nested sliders

1.3. Custom navigation buttons

You have the ability to display custom navigation buttons for any slideshow. Custom navigation buttons are always displayed in a nested slider. The look and feel of custom navigation buttons are determined by the post template setting of the nested slider. The theme comes with a couple of predefined post templates that are designed for custom navigation and you can also create custom ones. Moreover, selectors allow you to select different post templates for different navigation buttons.

View custom navigations

If the navigation belongs to a carousel slider, then there are two types of navigation units you can choose from. You can decide whether the buttons should refer to slides or pages.

View navigation units in action

1.5. Complex navigations

Every slider can have multiple navigations and every navigation slider can also have navigation buttons

View complex navigations

2. Previous and next buttons

Key features:

  • You can change the skin, icon and shape of the buttons.
  • You can select whether the buttons should be shown always, only when they are enabled or only when the mouse hovers over the slideshow.
  • You can choose from different navigation units (slide, page, view, view slide boundary, pixel, percentage).
  • Every slider can have multiple previous and next buttons. For instance, one that scrolls by slides and another one that scrolls by pages.

2.1. Button skins, icons, shapes

You can choose from several icons, select whether you want light or dark buttons and you can also select the shape of the buttons.

Shapes and skins:
Some of the icons:

2.2. Previous and next button units

For carousel sliders, the following navigaton units are supported:
  1. slide - scroll by a slide
  2. page - scroll by a page
  3. view - scroll by the size of the view
  4. view slide boundary - scroll as much as possible but the maximum amount of scroll is the size of the view and the slides must be aligned as specified by the "Slides align" option
  5. pixel - scroll by the specified number of pixels
  6. percent - scroll by the given percentage of the full slider width

View navigation unit types

3. Keyboard navigation

Keyboard navigation is also supported for slideshows. Just click on a slide to set the focus to the slideshow and you can use the left and right arrow keys to navigate in the slideshow. In popup slideshows, clicking on a slide is not necessary for the keyboard navigation to work.

4. Drag support

In carousel slideshows, you can scroll the slides by holding down the left mouse button on a slide and moving your cursor. This also works on touch devices by moving your finger. In single sliders, dragging triggers a slide change.

5. Range navigation

Range navigation makes carousel sliders more easier to use. You can change the skin the range control and with the help of slideshow templates you can specify where you want to place it in the slideshow.

View range navigation

This is a demo site for the Dottoro Slider,
which is part of the Dottoro WordPress Theme