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
[nivo post_parent=2155 theme=default271]
Width set
[nivo class=mw200 post_parent=2155 theme=default271]
Height set
[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:
- How to set the initial height of the nivo slider – default theme
- How to fix the height of the nivo slider – default theme
- How to set the initial height of the nivo slider – oik theme
- How to fix the height of the nivo slider – oik theme
- How to set the initial height of the nivo slider – bar theme
- How to set the initial height of the nivo slider – dark theme
- How to set the initial height of the nivo slider – light theme
