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:
- Navigation Buttons
- Previous and next buttons
- Keyboard navigation
- Drag support
- Range navigation
1. Navigation buttons
- 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 buttonsSupported types are:
- rectangle with numbers
- 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.
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.
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.
1.4. Navigation units
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.
1.5. Complex navigations
Every slider can have multiple navigations and every navigation slider can also have navigation buttons
2. Previous and next buttons
- 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 unitsFor carousel sliders, the following navigaton units are supported:
- slide - scroll by a slide
- page - scroll by a page
- view - scroll by the size of the view
- 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
- pixel - scroll by the specified number of pixels
- percent - scroll by the given percentage of the full slider width
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.