jQuery Nivo Slider has broken effects within WordPress

I’m using the jQuery Nivo Slider plugin on a WordPress project. Keep in mind that this is the free jQuery plugin version, not the WordPress plugin version, so I’m doing the integration myself into a child theme of the stock Twenty Thirteen WordPress theme.

To make it align properly with the other page entries, I used the standard WordPress classes on the wrappers…

The problem is, although the slider is nicely positioned on the page, the transition effects are broken. The slider is still working but just before each transition animation is supposed to start, you get a flicker of a tiny thumbnail in the upper-left corner and then the new slide appears… no slicing, no boxing, no wiping… nothing but sadness.

I was able to recreate my exact slider code in a jsFiddle and it worked flawlessly. After much troubleshooting, I discovered that the WordPress class .entry-content in the parent theme was the culprit.

However, the removal of .entry-content fixes Nivo slider, it also breaks the layout. By the time I figure out how to recreate the necessary parts of .entry-content to fix the layout, I’ve a whole bunch of unnecessarily redundant CSS.

Another look at the default CSS for the parent Twenty Thirteen theme reveals line #659…

Yes, this is it. This one CSS rule is completely breaking Nivo slider’s animation effects.

The fix is to simply un-set max-width to the default value of none by very specifically targeting the slider img elements. I placed this rule in my child theme’s style.css file.

Since .entry-content #slider img is more specific than the original selector, .entry-content img in the parent theme, it will automatically take precedence.

Nivo slider is now working as designed.

Leave a Reply

Your email address will not be published. Required fields are marked *