[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 / Centering the slider with a wider caption

Centering the slider with a wider caption

Here we develop some custom CSS to position the slider in the middle of a div with a caption that is wider than the slider images. This page has been updated for oik-nivo-slider version 1.7. The examples have been changed to use the default271 theme.

before

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

after

1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front
[nivo post_parent-2155 class=nivocenter theme=default271]
Since the nivo slider jQuery code’s animation logic works with chunks of images all starting from position 0,0 we can’t just attempt to centre the images in the slider area as the animation will be in the wrong place. So we need to adjust the slider area to fit the images then adjust the caption. This is the custom CSS used for this example:

div.nivocenter { margin: 0 auto; width: 300px;}
div.nivocenter div.slider-wrapper { margin: 0 auto; width: 200px; }
div.nivocenter .nivo-caption {margin-left: -40px; width: 140%; }
div.nivocenter { border: 1px solid gray; }
div.nivocenter div.slider-wrapper { border: 1px dotted gray; }
 
Notes:
  1. The first line of CSS positions the main div for the slider in the centre
  2. The second line positions the slider wrapper in the centre of the main div and sets the width to the width of the images we’re displaying
  3. The third line adjusts the caption’s width and repositions it to make it look as though the slider images are centred.
  4. The border stlyes in lines 4 and 5 are just to help you see how the divs are arranged.

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

Information

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

Recent plugin updates

UK-tides v3.1.1 UK-tides v3.1.1 is built with the latest wp-scripts. It's been tested with WordPress 6.2 and Gutenberg 15.7.0 ...
oik-weight-zone-shipping v0.2.6 oik-weight-zone-shipping v0.2.6 has been tested with WooCommerce 7.4.0. ...
sb-chart-block v1.2.3 SB Chart Block v1.2.3 contains a fix for an Uncaught Error: Call to undefined function bw_trace2()  ...
SB Chart Block v1.2.1 Update to SB Chart Block v1.2.0 for custom colors, font size options and multiple y-axis charts.  ...
oik-css v2.1.0 Update to oik-css v2.1.0 for the ability to style CSS and GeSHi output in documentation. ...

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.2.2. PHP: 7.4.33. Memory limit: 768M