Adding Previous / Next Buttons to a Rotator

Since Version 2.0 there is a now a simple checkbox when adding or editing a Testimonial Rotator that allows you to add Prev/Next button to the rotator.

prev-next-buttons

Changing the color

These are 20% black by default and can be easily changed by adding this code to your style.css file found in your theme folder.

.testimonial_rotator_nav .testimonial_rotator_prev, 
.testimonial_rotator_nav .testimonial_rotator_next { color: #238BE8; }

Change the #238BE8 to the hex or rgba color you want and you’re done.

Changing the type of arrow

The icons are from Font Awesome and can be changed by adding a filter in your functions.php file in your theme. Here are some examples. Please note that there are separate filters if you use the ScrollVert animation.

[gist id=cc5a7ba97d4b2a93acba]

Relocating the arrows

The default position for the rotators is absolute positioned 45% from the top of the container and 3px from the sides. These can be changed by adding the following CSS to your style.css in your theme folder. The following code example helps my plugin look great in the sidebar of the twentyfourteen theme.

.testimonial_rotator_nav .testimonial_rotator_prev { left: -21px; color: #fff; }
.testimonial_rotator_nav .testimonial_rotator_next { right: -21px; color: #fff; }