How to Remove Pager Numbers From a jQuery Cycle
The jQuery Cycle plugin is a slideshow script that includes several options for controlling style, transition effects and navigation. You can turn these options on or off in the main jQuery script file by setting a "null" value, or by using custom function calls in the HEAD of your HTML document. In most cases, pager numbers are created using one of these custom functions. To remove the pager numbers, locate the function and remove it, or remove the container element holding the pager navigation.
Other People Are Reading
Instructions
-
-
1
Open the HTML document containing the "head" tags for your website in a text or HTML editor. Look for a "script" tag containing a jQuery function similar to the following:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
$('#s4').before('<div id="nav" class="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
});
</script>
The selector defined in the "nav" or "pager" function corresponds with your jQuery Cycle container ID. In the above case, the selector is "s4."
-
2
Remove the entire function containing the "pager" parameter. Each individual function block begins with "$" and ends with the closing "});" bracket. Make sure you only remove the "$('#').before" function. You should now have a "script" tag that is either empty or contains any remaining functions. The following example uses the same code as the last step, with the pager function removed:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
-
-
3
Save the file and preview your slideshow in a browser window to confirm the results. To remove any remaining navigation elements, return to the HTML document and add the following custom function just above the "</head>" tag:
<script type="text/javascript">
$.fn.cycle.defaults = {
next: null,
prev: null,
pager: null
};
</script>
These three options tell the plugin not to use anything for paging or navigation. The slideshow will now transition automatically unless a different pager behavior is set.
-
1
Tips & Warnings
Set the the "pagerEvent:" option and give it a value of "'click.cycle'," which allows the viewer to click the slide to advance to the next image. For example:
<script type="text/javascript">
$.fn.cycle.defaults = {
next: null,
prev: null,
pager: null,
pagerEvent: 'click.cycle'
};
</script>
Be careful to not delete extra brackets or single quotations when working with functions. Doing so will cause them not to work.
References
Resources
- Photo Credit NA/AbleStock.com/Getty Images
