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
[nivo post_parent=2155 theme=default271]
after
[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:
- The first line of CSS positions the main div for the slider in the centre
- 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
- The third line adjusts the caption’s width and repositions it to make it look as though the slider images are centred.
- The border stlyes in lines 4 and 5 are just to help you see how the divs are arranged.
