[oik] plugins.com

WordPress plugins and themes

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: | Last updated: