In this article I will explain how to use a custom bit of jQuery code to hide the navigation bullets on specific slides in a Revolution Slider instance. You can copy and past the code into the Custom JavaScript field on the Slide Settings tab for the slider instance you wish to modify. I also exaplain each bit of the code for those who are interested.
For those who don’t care to read the full explanation, I have included the code first. To add the custom JS to your slider, do the following:
Straight to the Point
- Navigate to your WordPress site admin then to Revolution Slider > Slider Settings (for the slider you want to customize).
- Scroll to the bottom of the Slider Settings tab and paste the code below in the “Custom JavaScript” field.
- Modify the
hideBulletIDsvariable to include the slide number of the slides you do not want to have the navigation bullets. - Save the slider.
- Clear your site cache (if applicable).
(function($) {
if (! $) return;
$(function() {
// Store the indices of the slides that should not have bullets in an array.
var hideBulletsIDs = [1];
// If the first slide is in the 'hide' list, hide the bullets
// on load to avoid a flicker
if (hideBulletsIDs.indexOf(1) != -1) {
revapi1.bind('revolution.slide.onloaded',function(e) {
$('.tp-bullets').css('visibility', 'hidden');
});
}
// If the current slide index in the list,
// hide the bullets, otherwise clear the visibility setting.
revapi1.bind('revolution.slide.onchange', function(e,data) {
if ( hideBulletsIDs.indexOf(data.slideIndex) != -1 ) {
$('.tp-bullets').css('visibility', 'hidden');
}
else {
$('.tp-bullets').css('visibility', '');
}
});
});
})(jQuery || false);
A Detailed Explanation
The slides in a Revolution Slider instance are indexed starting with 1. Typically a JavaScript array is “zero-indexed” meaning the first item in the array is numbered 0, not 1. But in this case, the slides are numbered to be human reader friendly.
The first bit of this script is not specific to Revolution slider or even to WordPress, but rather to jQuery. The script, as written, is dependent on the jQuery library so we need to make sure it is loaded. The way I handle that here is only one way of doing it but it is widely accepted to be the best way. We are going to use a closure to create a private scope and pass the jQuery object in, if it is defined, or false if it is not.
Create a private scope, check for dependcies
(function($) {
if (! $) return;
// Our code will go here.
})(jQuery || false);
The line that reads if (! $) return; tells the JavaScript engine that if the dollar sign variable is set to false, then the jQuery object is not defined and to simply exit because the script doesn’t have the required dependencies.
Attach the script to the document.loaded event
We want to make sure the document is fully loaded before starting our script so we attach the execution to the document.ready event. You can write this two different ways. I always use the shorthand version but I have shown both below.
(function($) {
if (! $) return;
jQuery(document).ready(function() {
// This code will only run when the
// Document Object Model (DOM) is fully loaded.
));
})(jQuery || false);
The code below does exactly the same thing as the version above but is a shortcut.
(function($) {
if (! $) return;
$(function() {
// This code will only run when the
// Document Object Model (DOM) is fully loaded.
));
})(jQuery || false);
Next, we will list the slide number of the slides on which we want to hide the bullets.
(function($) {
if (! $) return;
$(function() {
// This code will only run when the
// Document Object Model (DOM) is fully loaded.
var hideBulletsIDs = [1, 3, 5];
// More to come ...
));
})(jQuery || false);
Set the initial Revolution Slider bullets state
If you don’t want the bullets to show on the first slide it is a good idea to hide them by default when the slider loads. If you wait to hide them when the first slide loads you will get a flicker where the bullets are visible then hidden very quickly. The next bit of code checks to see if the first slide is in the list to hide and hides the bullets before the first slide is displayed. If the first slide is not in the list, the script does nothing and shows the bullets by default.
(function($) {
if (! $) return;
$(function() {
// Store the indices of the slides that should not have bullets in an array.
var hideBulletsIDs = [1];
// If the first slide is in the 'hide' list, hide the bullets
// on load to avoid a flicker
if (hideBulletsIDs.indexOf(1) != -1) {
revapi1.bind('revolution.slide.onloaded',function(e) {
$('.tp-bullets').css('visibility', 'hidden');
});
}
// More to come ...
});
})(jQuery || false);
This is Where the Magic Happens
The next, and final, block of code is attached to the “slide.changed” event in Revolution Slider. As each new slide is loaded, the code checks to see if the slide number appears in the “list of slides to hide the bullets on” and hides them if it does. If it does not, the CSS visibility setting previously set by our jQuery code is set to an empty string. This tells the browser to apply whatever rule was previously specified in the CSS.
(function($) {
if (! $) return;
$(function() {
// Store the indices of the slides that should not have bullets in an array.
var hideBulletsIDs = [1];
// If the first slide is in the 'hide' list, hide the bullets
// on load to avoid a flicker
if (hideBulletsIDs.indexOf(1) != -1) {
revapi1.bind('revolution.slide.onloaded',function(e) {
$('.tp-bullets').css('visibility', 'hidden');
});
}
// If the current slide index in the list,
// hide the bullets, otherwise clear the visibility setting.
revapi1.bind('revolution.slide.onchange', function(e,data) {
if ( hideBulletsIDs.indexOf(data.slideIndex) != -1 ) {
$('.tp-bullets').css('visibility', 'hidden');
}
else {
$('.tp-bullets').css('visibility', '');
}
});
});
})(jQuery || false);
Help for Businesses and Agencies
Atomic Lotus specializes in helping small to medium-sized agencies provide big consulting quality digital services to their clients. We cater to agencies who don’t have the internal resources to build a digital practice but don’t want to turn away those projects. Please contact us today via the Contact Page to learn about our custom development, emergency services, ongoing support, and custom hosting packages. We have packages to fit most budgets.