{"id":8965,"date":"2020-07-02T15:00:07","date_gmt":"2020-07-02T13:00:07","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8965"},"modified":"2022-05-09T16:26:04","modified_gmt":"2022-05-09T14:26:04","slug":"slider-revolution-navigation-arrows-and-bullets","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-navigation-arrows-and-bullets\/","title":{"rendered":"How to Add Navigation Arrows and Bullets to Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Intuitive and well designed navigation is the key to a good user experience. This is equally true for all the individual parts of your website as it is for the site as a whole. When it comes to your slider, navigation not only lets your users switch back and forth through your slides, but also lets them know at a glance that there are more slides to look at. So, today, we\u2019re going to take a look at how to add navigation to Slider Revolution<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are two basic types of navigation for a slider: arrows and bullets. We\u2019re going to be using arrow navigation for bigger screens, like desktops and laptops. We\u2019ll reserve bullet navigation for smaller devices like tablets and phones. [\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

How to Add Navigation Bullets to Slider Revolution<\/h2>\n

[\/vc_column_text][vc_column_text]When using a horizontally oriented slider, it makes sense to add arrows to the left and the right side of the screen. To turn on arrows in Slider Revolution, go to Navigation > Arrows<\/strong><\/em> and switch Arrow Type<\/strong> to ON<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There are several default arrow styles. To change the look of your arrows styling, check out the Arrow Style<\/strong> dropdown to see what options are available.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Arrow <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you decide on the style of your arrows, you can go ahead and customize each arrow separately (left and right). There are quite a few things you can play around with here.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The arrows can be aligned to your slide (Module Dimensions<\/strong>), or to your grids (Content<\/strong>).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Module <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, you can set the arrow alignment and add horizontal and vertical paddings.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Arrows can also be animated. The default appearing animation<\/a> is a simple Fade<\/strong>. If you want to change the way the enters the screen, choose a different animation from the dropdown.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Animated <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can also change the speed and delay of the animation, as well as hide the arrows on smaller devices<\/strong>. The arrows will be always visible unless you turn ON<\/strong><\/em> the switch next to Hide Under<\/strong><\/em>. Then, all you need to do is enter the screen size below which you want the arrows to disappear. We normally use the value of 778px. By doing this, we hide the arrows on all touch devices (tablets and mobiles).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Hide <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The style of the navigation can be customized with ease, and so much so that you can create an entirely original style of you own without any coding knowledge.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Style <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding Navigation Bullets to Slider Revolution<\/h2>\n

[\/vc_column_text][vc_column_text]As we already mentioned, since bullets are smaller and don\u2019t take up so much real estate on the screen, they are mostly used for navigation on touch devices. They serve as a nice, subtle indicator that there are more slides to view. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To turn on bullets in Slider Revolution go to Navigation > Bullets<\/strong><\/em> and switch Bullets Type<\/strong> to ON<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Just like navigation arrows, bullets also have a dropdown that lets you choose a variety of styles.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Choose <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To define the spacing between bullets, simply change the G<\/strong>ap<\/strong><\/em> value.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Gap <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To set the direction of your bullets, choose between horizontal or vertical for the Orientation<\/strong>. You should use the vertical direction when you have a vertical slider. And, in that case, we recommend using only bullets, without arrows. In every other case though, we suggest you use bullets just for smaller devices, with their direction set to horizontal.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Orientation\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To hide bullets on desktop and laptop screens, turn on the Hide over Width<\/strong><\/em> option and set the width to 1024px.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Hide <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can also play around with the navigation style of your bullets if you\u2019d like to create an original look for them. [\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”qi-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]And that\u2019s all there is to it. Now you know how to add navigation to Slider Revolution<\/a>. You should always try to do your best to customize your navigation arrows and navigation bullets to better fit the style of your website. But even by simply adding the default navigation elements to your slider, you will boost the UX of your site and make it more intuitive for your visitors. If, for some reason, Slider Revolution doesn\u2019t work for you, there\u2019s a perhaps even better option, and that\u2019s Qi Addons for Elementor<\/a>, our own collection of useful widgets for Elementor users. The collection contains a number of advanced slider widgets, such as the Hover-aware Slider<\/a>, Animated Device Slider<\/a>, Numbered Slider<\/a> and many more.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Learn how to easily add navigation arrows and bullets to Slider Revolution in order to ensure the best user experience for your site visitors.<\/p>\n","protected":false},"author":6,"featured_media":9036,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8965"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/9036"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}