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

Recent plugin updates
oik v2.4-alpha.1112 Changes for WP-a2z and oik-plugins. ...
oik-shortcodes v1.26 Changes to improve the display of the Dynamic API Reference for WP-a2z and oik-plugins. ...
oik-rwd v0.5 Added support for defining the breakpoint where RWD logic starts to take effect. ...
oik-css v.07 Required for better control over Automatic paragraph creation. Now dependent on oik v2.3 or higher. ...
oik v2.4-alpha.1012 Improvements to the [bw_fields] shortcode. ...
oik-bob-bing-wide v1.27 Changes for oik-plugins and any other site wanting to display data from the wp_options table. ...
oik-plugins v1.13 Tested with WordPress 4.0. Required for improved results for [bw_table]. ...
oik-bob-bing-wide v1.26 Required for AumAbsFitnessStudios.com with multiple instances of the Responsive Pricing Table shortcode. ...
oik-types v1.6 oik-types v1.6 adds the ability to select the post types to be displayed on the home page. So your front page really can display your most recent activity! ...
oik v2.3 oik version 2.3, tested on WordPress 4.0 and WordPress Multisite, now delivers over 80 advanced shortcodes. ...