WordPress plugins and themes

You are here: Home / oik-nivo-slider – [nivo] shortcode for the Nivo slider / oik-nivo-slider FAQ / Controlling the height of the nivo slider

Controlling the height of the nivo slider

If you have limited space into which you want to place your slider then you may want to limit the height as well as the width. We can write custom CSS to define the maximum height of the nivo slider. In nivo slider is wider than my images we used CSS to adjust the width of the slider. Here we’ve added a third block where the height is controlled as well. Note: The images are the same; we use post_parent=2155 to select the correct attachments.

Before

1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front
[nivo post_parent=2155 theme=default271]

Width set

1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front
[nivo class=mw200 post_parent=2155 theme=default271]

Height set

1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front
[nivo class="mw200 mh100" post_parent=2155 theme=default271]
Use custom CSS ( ) to set the max-height of the slider that surrounds each image. Here we do it by setting a class on the slider to mh100 which is defined as

div.mh100 div.slider-wrapper { height: 140px ; overflow: hidden;}
div.mh100 div.slider-wrapper div.nivoSlider { max-height: 100px ;}
div.mh100 .nivoSlider a.iframe:first-child  { height:100px; max-width: 100%; overflow: hidden; }
div.mh100 div.slider-wrapper div.nivoSlider img { max-width: 100%; height: auto; overflow:hidden; position: relative; }
div.mw200 div.slider-wrapper { max-width: 200px; }

 
Note that this crops the image to the maximum height. So the bottom half of each image is lost. Additional CSS may be required to prevent stacked images from appearing.

.theme-default271 #slider-2 a.iframe:first-child img,
.theme-default271 #slider-1 a.iframe:first-child img  { margin-bottom: 40px; }
.theme-default271 .nivoSlider a.iframe:nth-child(n+2) img  { display:none; }
 

Notes

These notes apply to sliders displayed using themes from Nivo version 2.7.1; default271, orman, pascal, oik271 They do not apply to fully responsive themes from Nivo 3.1 and above. See:

See also

Component:
Letters:

Published: | Last updated: