How to Add Navigation Arrows and Bullets to Slider Revolution

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

Intuitive and well-designed navigation is the key to a good user experience. This applies equally to all individual sections of your website as it does to the site as a whole. When it comes to your slider, navigation not only lets your users switch between your slides, but also lets them know at a glance that there are more slides to look at. Today we will take a look at how to add navigation to Slider Revolution.

There are two basic types of navigation for a slider: arrows and bullets. We will use arrow navigation for larger screens such as desktops and laptops. We’ll reserve bullet navigation for smaller devices like tablets and phones.

How to Add Navigation Bullets to Slider Revolution

When using a horizontally oriented slider, it makes sense to add arrows to the left and right of the screen. To turn on arrows in Slider Revolution, go to: Navigation > Arrows and transition Arrow Type with OVER.

There are several default arrow styles. To change the appearance of your arrow style arrow style Drop-down menu to see what options are available.

Once you have decided on the style of your arrows, you can go ahead and customize each arrow individually (left and right). Here are a few things you can play with.

Arrows can be aligned to your slide (Module Dimensions) or to your grids (Contents).

Then you can adjust the arrow alignment and add horizontal and vertical fills.

Arrows can also be animated. Default appearing animation is simple Fade. If you want to change the way it enters the screen, choose a different animation from the drop-down menu.

You can also change the speed and delay of the animation. hide arrows on smaller devices. Arrows will always be visible unless you turn OVER key next to Hide Under. Then all you have to do is enter the screen size under which you want the arrows to disappear. Normally we use the value 778px. By doing this we hide the arrows on all touch devices (tablets and mobile phones).

The style of the navigation is easily customizable and so much so that you can create your own style without any coding knowledge.

Adding Navigation Bullets to the Slider Revolution

As we mentioned earlier, they are mostly used for navigation on touch devices, as bullets are smaller and don’t take up much space on the screen. They serve as a nice subtle indicator that there are more slides to view.

To turn on bullets in Slider Revolution, go to: Navigation > Bullets and transition Bullet Type with OVER.

Like the navigation arrows, the bullets have a drop-down list that lets you choose a variety of styles.

To define the space between bullets, simply Gapp value.

Choose between horizontal or vertical to adjust the direction of your bullets. Orientation. When you have a vertical slider you should use the vertical orientation. And in this case, we recommend using only bullets, without arrows. In all other cases, we recommend using bullet points only for smaller devices, with their orientation set to landscape.

To hide bullet points on desktop and laptop screens Hide in Width Select the option and set the width to 1024 pixels.

You can also play around with the navigation style of your shells if you want to create an original look.

As a result

And that’s all. Now you know how to add navigation to Slider Revolution. You should always try your best to customize your navigation arrows and navigation bullets to better suit your website style. However, even by simply adding the default navigation elements to your slider, you will increase your site’s UX and make it more intuitive for your visitors.