Manual

The fundamentals of using Slider Revolution.

Activate and Configure Arrow Navigation

Learn how to add navigation arrows to your Slider Revolution modules.

What Do Arrows Do? 

Navigation arrows are a pair of buttons that appear on a module, typically at its left and right edges, and give the visitor a way to manually move to the next or previous slide:

Activating Arrow Navigation

To add arrow navigation to your module, go to the Navigation Options tab, Arrows sub-section:

Set the toggle in the Arrow Type panel to ON:

A number of new panels and options that can be used for further configuration will then appear below:

Configuring Arrows

Arrow Style

In the Arrow Type panel, you can use the Arrow Style option dropdown to select from several different styles for your arrows:

Different arrow styles have varying shapes, colors, borders and backgrounds. 

Left/Right Arrow Panels

Below the Arrow Type panel you will see the panels Left Arrow and Right Arrow:

Both panels contain the same options, with each applying to a single arrow only. 

Aligned by

The Aligned by option allows you to decide what the arrows’ alignment should be relative to. It can be set to either Module Dimensions or Content:

If you select Module Dimensions, the arrows will be pushed out to the further edges of the module:

If you select Content, the arrows will stay inside the area marked on your canvas with the blue dotted lines:

Alignment

The Alignment option allows you to set the horizontal and vertical alignment of your arrow. You will see a grid of points representing the available alignment settings: the corners, edges and center:

For example, if you click the top right grid point, your arrow will be aligned to the top right corner:

Offset X/Y

The Offset X and Offset Y options allow you to offset an arrow’s position by a pixel(px) amount:

The Offset X option creates a horizontal offset. If the arrow is left aligned, the offset will move the bar to the right. If the progress bar is right aligned, the offset will move the bar to the left.

For example, here is a right arrow with Aligned by set to Module DimensionAlignment set to the center right, and Offset X set to 70px:

The Offset Y option creates a vertical offset. If the arrow is top aligned, the offset will move the bar down. If the arrow is bottom aligned, the offset will move the bar up.

For example, here is a right arrow with Aligned by set to ContentAlignment set to the top right, and Offset Y set to 120px:

Animation

By default, when your arrows appear they will fade in. However, you can alternatively use the Animation option to have them appear via a different animation instead.

You can make the arrows slide in from one of four directions, zoom in, or zoom out:

Visibility Panel

RTL Direction

By default, clicking the right arrow progresses to the next slide.

If instead you want the left arrow to progress to the next slide, toggle the RTL Direction option to ON:

Show Speed

The Show Speed option allows you to set the time, in milliseconds(ms), it should take for your arrows to animate into view:

Show Delay

The Show Delay option allows you to set the time, in milliseconds(ms), that should pass before your arrows begin animating into view:

Show Always

If you’d like the arrows to disappear when there is no mouse hovering over the module, toggle the Show Always option to OFF:

The arrows will then disappear after a certain period of time, and reappear if the visitor hovers or taps the module.

When Show Always is set to OFF, the options Hide After: Desktop and Hide After: Mobile will appear:

Hide After: Desktop

Use the Hide After: Desktop option to set the amount of time, in milliseconds(ms), before the arrows should be hidden on desktop devices.

Hide After: Mobile

Use the Hide After: Mobile option to set the amount of time, in milliseconds(ms), before the arrows should be hidden on mobile devices.

Hide Under

If you’d like the arrows to be hidden when browser window is narrower than a certain width, toggle the Hide Under option to ON:

Hide Under Limit

When Hide Under is set to ON, the option Hide Under Limit will appear:

Use the Hide Under Limit option to set the browser width, in pixels(px), under which the arrows should be hidden.

Hide Over

If you’d like the arrows to be hidden when browser window is wider than a certain width, toggle the Hide Over option to ON:

Hide Over Limit

When Hide Over is set to ON, the option Hide Over Limit will appear:

Use the Hide Over Limit option to set the browser width, in pixels(px), over which the arrows should be hidden.

Navigation Style Panel

The Navigation Style panel allows you to customize the appearance of your module’s navigation arrows:

Note: This panel may or may not appear, depending on the setting of the Arrow Style option, because some styles cannot be customized.

The options in this panel can also vary depending on your chosen Arrow Style. For example, if Arrow Style is set to Bordered Arrows, the options available in the Navigation Style panel would look like this instead:

For any aspect of the navigation style you want to override, toggle the switch on its right to ON:

Each Arrow Style has its own collection of style options, so sometimes you might see options with different names that do very similar things. The range of these options that can appear are as follows:

Arrow Icon Options

Arrow Color or Arrow

The Arrow Color option is used to set the color of the arrow icon:

In the Hades style only, use the Arrow option to set the color of the arrow icon:

Hover Arrow

The Hover-Arrow option is used to set the color of the arrow icon when hovered over:

Arrow Size, Font Size or Icon Size

The Arrow-Size option is used to set the size of the arrow icon:

In the Uranus style only, use the Font-Size option to set the size of the arrow icon:

In the Bordered Arrows style only, use the Icon Size option to set the size of the arrow icon:

Icon Line Height

In the Bordered Arrows style only, the Icon Line Height option sets the line height of font icons:

Left/Right Icon or Left/Right Arrow

The Left-Icon or Right-Icon options are used to select an arrow icon style with a CSS Unicode string:

In the Hephaistos style only, use the Left-Arrow and Right-Arrow options to select an arrow icon style:

Background Options

BG Color, Background, or BG-RGBA

The BG-Color or Background options are used to set the color of the area behind the arrow icon:

In the Erinyen style only, use the BG-RGBA option to set the background color behind the arrow icon:

BG Size or Size

The BG-Size and Size options can both be used to set the size of the area behind the arrow icon, without changing the size of the icon itself:

Hover Background, Hover BG Color, or BG Color Hover

The Hover-Background option is used to set the color of the area behind the arrow icon on hover:

In the Hesperiden style only, use the Hover-BG-Color option to set the color of the area behind the arrow icon on hover:

In the Dione style only, use the BG-Color-Hover option to set the color of the area behind the arrow icon on hover:

Title & Image Options

Title Wrap BG Color, Title Background, or Overlay

In an arrow style that incorporates a post title, depending on the Arrow Style, the Title-Wrap-BG-Color, Title-Background, or Overlay options are used to set the background color behind that title.

In the Hebe style only, use the Title-Wrap-BG-Color option to set the background color behind the post title on hover:

In the Hermes style only, use the Title-Background option to set the background color behind the post title:

In the Erinyen style only, use the Overlay option to apply a color to both the background of the post title and the navigation button, visible on hover:

Title Color, Title Font Color, or Hover Title

In an arrow style that incorporates a post title, depending on the Arrow Style, the Title-Color, Title-Font-Color, or Hover-Title options are used to set the color of that title.

In the Hebe style only, use the Title-Color option to set the color of the post title, visible on hover:

In the Hermes style only, use the Title-Font-Color option to set the color of the post title, visible on hover:

In the Ares style only, use the Hover-Title option to set the color of the post title, visible on hover:

Wrapper Height/Wrapper Width

In the Hermes style only, the Wrapper-Height and Wrapper-Width options are used to set the height and width of the post title:

Title Size or Title Font Size

In an arrow style that incorporates a post title, the Title-Size option sets the font size of the post title:

In the Erinyen style specifically, use the Title-Font-Size option to set the font size of the post title:

Image Size

In the Hebe style only, the Image-Size option sets the size of the post image, visible on hover:

Other Options

Height, Width, or Width & Height

The Height option sets the overall height of the area containing the navigation arrow:

The Width option sets the overall width of the area containing the navigation arrow: 

In the Bordered Arrows style only, use the Width & Height option to set both the width and height of the area containing the navigation arrow:

Padding

In the Metis style only, use the Padding option to create space around the arrow icon:

Dark Color and Light Color

In the Bordered Arrow style only, use the Dark Color option to set the border, arrow and background hover color:

In the Bordered Arrow style only, use the Light Color option to set the background and arrow hover color:

Border

In the Persephone style only, the Border option sets the border color of the navigation arrow container:

Title Wrap Border Radius

In the Erineyn style only, the Title-Wrap-Border-Radius option sets the border radius of the post title background on hover, allowing you to easily adjust between square and rounded corners:

Letter Spacing

In the Erineyn style only, the Letter-Spacing option controls the spacing between letters in the post title, visible on hover:

Global Style Presets Panel

After customizing a navigation arrow style, it can be saved for later use via the Global Style Presets panel: 

Save a Preset

To save a new custom preset, expand the Preset dropdown, type in a name for your preset:

Press ENTER on your keyboard to commit the name, then click the Save button to save your current style under that name:

Load a Preset

To load a preset, expand the Preset dropdown and select the preset you want to use:

Then click the Load button to apply the selected preset:

Delete a Preset

To delete a preset, expand the Preset dropdown and select the preset you want to remove:

Then click the Delete button to remove the selected preset:

Override Style On Slide Panel

The Override Style On Slide panel has all the same options as the Navigation Style panel:

However instead of affecting the arrows for the entire module, it allows you to override any of those options on the currently selected slide, identifiable by the slide that is highlighted blue in the Slides dropdown menu:

Activate and Configure Arrow Navigation

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.