Navigation

In this capital we will focus on the 4 main types of Navigation Elements, Arrows, Bullets, Thubmnails and Tabs.

You will find a list of possible settings and options under the Navigation Settings here.

Each Navigation Element is built due different individual components which are referenced due predefined Classes.  If any component exist with the predefined Class, the element will be drawn and becomes functionality due the Plugin.

In the following section we will discuss about the available Component and Classes per Navigation Element, their Styling and functions.

For easy use, you can load the full Library of the Navigation skins due the revolution/css/navigation.css file or load only the required skin styles one by one due the revolution/css/navigation-skins/.

Arrows used generally to navigate to the previous or to the next slider.  If  the setting navigation: { arrows:{enable:true}}  is active, two tparrows container added to the rev_slider container.

You find more to Global Arrow settings here.

Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders.  Markups are defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Arrow Containers on demand.

Based on the Placeholders,  Classes and existing Markup elements, images, title and icons will be added or ignored.

If Arrows are enabled, the plugin will create two arrow Elements per Slider. Each Arrow has a global class tparrows and an individual class tp-leftarrow and tp-rightarrow.

tp-leftarrow will trigger the previous slide, tp-rightarrow will trigger the next slide in the slider.

Predefined Class

• tp-arr-imgholder – If a container has this class, the style attribute background-image will be dynamically draw the previous/next slide thumbnail.  Thumbnails pulled from data-thumb attribute of the Slides or from the Main image defined in the Slide if data-thumb is not existing.

Placeholders in the Markup

Placeholders are defined via {{placeholder}} .  The two most used Placeholder are {{title}} and {{description}} which will pull content from the Slide data-title and data-description attributes.

Again,  adding the Markup above to the Slider Settings via the tmp Key like navigation: { arrows: { tmp:’…’}} will draw an Arrow with the Markup and replace the {{title}} with the previous/next slide’s data-title attribute, and will set the background image of the tp-arr-imgholder container based on the data-thumb settings of the previous/next slide.

Find all Navigation Examples in the Downloaded Package,  under examples/Navigation folder.

Bullets used generally to navigate to a specific slide.  If  the setting navigation: { bullets:{enable:true}}  is active, a bullets wrapping container and as many bullets as many slides exists added  to the rev_slider container.

You find more to Global Bullets settings here.

Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders.  Markups are defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Bullets on demand.

Based on the Placeholders,  Classes and existing Markup elements, images, title and icons will be added or ignored.

If Bullets are enabled, the plugin will create as many Bullets as many Slides exists in the Slider.  The Bullets wrapper container will get a class name tp-bullets and each bullet within the tp-bullets will get the class name tp-bullet.

Predefined Class

• tp-bullet-image – If a container has this class, the style attribute background-image will be dynamically draw the referenced slide thumbnail.  Thumbnails pulled from data-thumb attribute of the Slides or from the Main image defined in the Slide if data-thumb is not existing.

Placeholders in the Markup

Placeholders are defined via {{placeholder}} .  The two most used Placeholder are {{title}} and {{description}} which will pull content from the Slide data-title and data-description attributes.

Again,  adding the Markup above to the Slider Settings via the tmp Key like navigation: { bullets: { tmp:’…’}} the slider will draw a Bullet Wrapper  Container  with Bullets with the Markup and replace the {{title}} with the slide’s data-title attribute, and will set the background image of the tp-bullet-image container based on the data-thumb settings of that slide.

Find all Navigation Examples in the Downloaded Package,  under examples/Navigation folder.

Thumbnails used generally to navigate to a specific slide and show a short “preview” of the coming Slide.  If  the setting navigation: { thumbnails:{enable:true}}  is active, a Thumbnail wrapping container and as many Thumbs as many slides exists added  to the rev_slider container.

You find more to Global Thumbnail settings here.

Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders.  Markups are defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Thumbnails on demand.

Based on the Placeholders,  Classes and existing Markup elements, images, title and icons will be added or ignored.

If Thumbnails are enabled, the plugin will create as many Thumbnails as many Slides exists in the Slider.  The Thumbnail wrapper container will build a structure of Masks, scrollers and internal wrappers. Each Thumbnail within these Wrappers will get the class name tp-thumb.

Predefined Class

• tp-thumb-image – If a container has this class, the style attribute background-image will be dynamically draw the referenced slide thumbnail.  Thumbnail images pulled from data-thumb attribute of the Slides or from the Main image defined in the Slide if data-thumb is not existing.

Placeholders in the Markup

Placeholders are defined via {{placeholder}} .  The two most used Placeholder are {{title}} and {{description}} which will pull content from the Slide data-title and data-description attributes.

Again,  adding the Markup above to the Slider Settings via the tmp Key like navigation: { thumbnails: { tmp:’…’}} the slider will draw a Complex Structure of Thumbnail  Wrapper  Container  with Single Thumbnails.  Thumbnails will get the Markup defined above and replace the {{title}} with the slide’s data-title attribute, and will set the background image of the tp-thum-image container based on the data-thumb settings of that slide.

Find all Navigation Examples in the Downloaded Package,  under examples/Navigation folder.

Tabs, just like Thumbnails used generally to navigate to a specific slide and show a short “preview” of the coming Slide.

If  the setting navigation: { tabs:{enable:true}}  is active, a Tab wrapping container and as many Tabs as many slides exists added  to the rev_slider container.

You find more to Global Tabs settings here.

Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders.  Markups are defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Tabs on demand.

Based on the Placeholders,  Classes and existing Markup elements, images, title and icons will be added or ignored.

If Tabs are enabled, the plugin will create as many Tabs as many Slides exists in the Slider.  The Tab wrapper container will build a structure of Masks, scrollers and internal wrappers. Each Tab within these Wrappers will get the class name tp-tab.

Predefined Class

• tp-tab-image – If a container has this class, the style attribute background-image will be dynamically draw the referenced slide thumbnail.  Thumbnail images pulled from data-thumb attribute of the Slides or from the Main image defined in the Slide if data-thumb is not existing.

Placeholders in the Markup

Placeholders are defined via {{placeholder}} .  The two most used Placeholder are {{title}} and {{description}} which will pull content from the Slide data-title and data-description attributes.

Again,  adding the Markup above to the Slider Settings via the tmp Key like navigation: { thumbnails: { tmp:’…’}} the slider will draw a Complex Structure of Tabs  Wrapper  Container  with Single Tabs.  Tabs will get the Markup defined above and replace the {{param1}} with the slide’s data-param1 attribute, and will set the background image of the tp-tab-image container based on the data-thumb settings of that slide.

Find all Navigation Examples in the Downloaded Package,  under examples/Navigation folder.