Centering slide images vertically

[william-vw]

I need to set a fixed width for the slide show, which also means max-width and max-height for the images. This means that some images will be less high than the slideshow container, and they are positioned at the top.

I was wondering how one can center slide images vertically. Since the images are positioned absolutely by slidr.js, it's not as simple as adding a vertical-align directive. Adding a top: xx directive will apply to all images, not only the small ones.

[bchanx]

Hi @william-vw, you can try using css flex-box to align things vertically and horizontally. For example:

• without display: flex:
  
• with display: flex, using align-items: center and justify-content: center:
  

[william-vw]

Thanks a lot for this! Yes, using flex-box works. Seems like I stopped following CSS about ten years ago .. I had actually outfitted the slidr code with a dynamic re-positioning (setting top, left) based on the naturalHeight and naturalWidth of the images once they were loaded. Talk about overkill .. Lol.

FYI, I was wondering why the pause effect was not working when using the auto mode - it looks like mouse tracking is only enabled when keyboard is found in the settings:

if (_.settings['keyboard']) nav.mouse.track(_.slidr);

Which seems a bit strange, but maybe there's a reason?

Anyway, thanks for the awesome library :-)