FIXED: nivo slider transition problem

A long time ago, I was asked if it was possible to put the nivo shortcode into a sidebar widget. I said yes, and developed an example on this site – in the header. Since then I’ve had problems where the transitions weren’t displaying correctly. In June 2013 I tried applying a fix to set max-width to none on .nivoSlider img. Just recently, I noticed the problem on a slider being displayed in a text widget in a child theme I was creating. And today I finally tracked down the problem.

Problem

As demonstrated in a screen capture in H2GD Part 18: nivo slider started misbehaving, a small image appears in the top left corner of the slider. In the new theme this small image varied in size. I noticed it also varied depending on the transition being performed.

I was able to trim the HTML down to demonstrate that it was the fact that the slider was embedded in a div with a class of “textwidget” that caused the problem to appear. Then I looked at the CSS.

Explanation

oik.css included the following

The nivo slider CSS in nivo-slider-32.css was setting the margins on images in divs with a class of “nivo-slice” or “nivo-box” to 0, but it was not setting max-width to none. I have now corrected this, in both the oik-nivo-slider AND oik base plugin, using the following CSS

Hopefully, this slider should appear correctly.

Note: It’s in a div of class “textwidget w80pc”

See also

• H2GD Part 18: nivo slider started misbehaving
• oik-nivo-slider version 1.11 contains a fix for this problem.