oik-plugins
WordPress plugins and themes

nivo slider is wider than my images

A blank space to the right of each image indicates that the nivo slider is wider than your images. The space on the right is because the nivo slider part of the code sets its width to the size of the containing div but your images are smaller. You can control this by using CSS classes on the slider-wrapper or theme-default selector.

Before
1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front

[nivo theme=default271]

After
1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front

[nivo class=mw200 theme=default271]

Use custom CSS ( {} ) to set the max-width of the slider. Here we do it by setting a class on the slider to mw200 which is defined as


div.mw200 div.slider-wrapper { max-width: 200px; overflow: hidden; }
.theme-default271 .nivoSlider a.iframe:first-child img  { margin-bottom: 40px; }
.theme-default271 .nivoSlider a.iframe:nth-child(n+2) img  { border-top: 3px solid red; display:none; }
 

You can also set the max-width for all instances of the slider div.slider-wrapper { max-width: 618px; } or set it on a specific page div#post-53 div.slider-wrapper { max-width: 618px; }

Note: These notes are applicable Nivo version 2.7.1, not nivo version 3.2. You need to choose a non-responsive theme, e.g. default271, for this method to work. If you are using a responsive Nivo theme (e.g. the default theme) then this logic does not apply.

Leave a Reply

Follow Herb Miller on TwitterFollow Herb Miller on FacebookFollow Herb Miller on LinkedInFollow Herb Miller on GooglePlusFollow Herb Miller on YouTubeFollow Herb Miller on PinterestFollow Herb Miller on Instagram