[oik] plugins.com

WordPress plugins and themes

  • Home
  • About
    • lazy shortcodes
    • smart shortcodes
    • oik base plugin
      • oik – donate
      • oik PayPal buttons
      • oik installation
      • oik Button Shortcode button
      • oik changelog
      • oik FAQ
      • oik plugins on SVN
      • oik plugins on GitHub
  • Plugins
    • oik base plugin
    • FREE oik plugins
    • WordPress plugins
    • Premium oik plugins
    • Bespoke oik plugins
  • Shortcodes
    • Shortcode examples
  • Blocks
    • Block examples
  • APIs
    • ALL action and filter hooks
  • Blog
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:
  • 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

See also

  • [nivo]
  • Prevent nivo slider images from appearing in a stack
  • oik-css
Component:
  • oik-nivo-slider – jQuery nivo slider
Letters: C

Published: November 5, 2012 | Last updated: December 1, 2020

Information

Component:
  • oik-nivo-slider – jQuery nivo slider
Letters: C

Recent plugin updates

oik-css v2.1.0 Update to oik-css v2.1.0 for the ability to style CSS and GeSHi output in documentation. ...
oik-types v2.3.0 Update to oik-types v2.3.0 for improved control over sort order on archives ...
UK-tides v3.1.0 UK-tides v3.1.0 now supports several additional ports. It's built with latest wp-scripts and shared libraries and tested with WordPress 6.1. ...
oik v4.8.2 Upgrade to oik v4.8.2 if you installed oik v4.8.1 from wordpress.org and found that the blocks were missing from the editor. ...
sb-chart-block v1.1.0 sb-chart-block v1.1.0 now uses chart.js v3.9.1. Tested with WordPress 6.0.1 and Gutenberg 13.8.2 ...

Plugins

  • All Plugins
  • oik base plugin
  • FREE oik plugins
  • WordPress plugins
  • Premium oik plugins

Themes

  • FREE themes
  • Bespoke themes
  • Premium themes

Blocks

  • All Blocks
  • Block examples
  • About Blocks

Shortcodes

  • All Shortcodes
  • Shortcode examples
  • About Shortcodes

Reference

  • About APIs
  • All APIs
  • All Classes
  • All Files
  • All Hooks

Support

  • Contact
  • Cookies policy
  • Get API key
  • Privacy
  • Request support
  • Sitemap
  • Stay informed
  • Terms and Conditions
oik-plugins
Email: oikplug@oik-plugins.com

Weight shipping plugins

Find out which cart weight shipping plugin you need for your WooCommerce site.
Which cart weight based plugin do I need?

Site:  www.oik-plugins.com
© Copyright oik-plugins 2011-2023. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress and oik-plugins
WordPress 6.1.1. PHP: 7.4.33. Memory limit: 768M