Change Style of Bullets

This article is now outdated!

Click here to see where these settings can be found in version 5.0+.

Additional resources for the slider’s navigation:

https://www.youtube.com/watch?v=OGYMz0duPJg
http://www.themepunch.com/faq/css-tricks-numbered-bullets/

Slider Revolution includes multiple built-in styles for navigation bullets.

These styles can be be changed with some custom CSS.

 

 

To use one of the Predefined Bullets

  1. Open up the Slider Settings
  2. Expand the Navigation Section
  3. Change the Navigation Type and Style as you need

 

updated-nav-image

 

To Style your own Navigation Bullet

  1. Open up the Slider Settings
  2. Expand the Navigation Section
  3. Change Style to “round”
  4. Open up any of your Stylesheets (i.e.  Appearance / Editor)
  5. Change the Style of the following Classes:
    • .tp-bullets.simplebullets.round
    • .bullet
    • tp-bullets.simplebullets.round
    • .bullet:hover

 

Example CSS that can be added here

 

You can use background images, fontello icons etc instead of the style we created above. There are unlimited possibilities.  Important that width and height is defined also, if it is different then the current one, since the calculation of the elements happens in the jQuery plugin.