How to Remove Pager Numbers From a jQuery Cycle

104 46
    • 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>').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.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.