I'm working with the jQuery plugin called Slippry: http://slippry.com/
I am using the Ken Burns style of slider effect: http://slippry.com/examples/pictures/
The Slippry plugin is fine and gives me the Ken Burns effect I want for the banner graphics, however, I also need to find a way to vertically center some text and an icon over the Ken Burns slider. This is proving to be a real challenge. I was unable to get my codepen example to properly reference the js and css files for Slippry but you can see how I have the HTML, CSS and the jQuery settings setup for for reference: http://codepen.io/sdejaneiro/pen/KrOpBz?editors=1000
The HTML:
<div id="box">
<div class="banner-text">
<div id="Box-Img" class="clearfix">
<img id="image" src="http://placehold.it/100x100">
</div>
<p id="text">
LOREM IPSOM DOLOR
</p>
<p id="text1">
Donec sollicitudin ipsum quam, ut fringilla lectus mattis ac. Aenean sit amet arcu ac erat sodales imperdiet ac eget ex.
</p>
</div>
<ul id="slippry-demo">
<!--Loop over the 3 images for the Ken Burns slider here-->
</ul>
</div>
Then text needs to be vertically centered on the right side of the Ken Burns slider, and every time I try to get things working, I can never for the life of me get the text to vertically center over the div containing the slider items. I can get the text to vertically center inside the #box div but I cannot get that #box div or just the #banner-text div itself with its contents to vertically center over the Ken Burns slider. I don't know if it has something to do with that fact the slider is designed to scale responsively both vertically and horizontally or not
I want to keep the Slippry plugin because it provides a good Ken Burns effect, and I couldn't find a plugin that allowed for the positioning of text in the manner I wanted.
Is there some way to make this happen? Has anyone ever encountered a customization issue such as this with a slider/banner plugin? Any suggestions or examples would be wonderful as I am completely stumped.
