Item alignment within an image carousel

Question

I'm using the Owl Carousel responsive slider, and I'm trying to figure out how to position image and caption elements within the main container. I have a test page set up here and I'm attaching a mockup guide. Ideally, I'd like to set up a max/min-height for the container element, fix the <p> caption to the bottom left of the container, and vertically align the image to the middle of the slider.

Is this possible via basic CSS? Thanks for any guidance here.

Solution 1

Add this to your css file:

div.owl-item > div {
display:table-cell;
vertical-align:middle;
}

and add this to your JS file (or between the head tag) for dynamic w/h:

$(window).load(function() {

var maxH = 0;
var maxW = 0;
$('img','div.owl-item > div').each(function(f) {
if ($(this).height() > maxH) { maxH = $(this).height() };
if ($(this).width() > maxW) { maxW = $(this).width() };
});
$('div.owl-item > div')
.height(maxH)
.width(maxW);


});

Solution 2

If you want dynamic height of image for responsive, set it's height with jquery.

DEMO http://jsfiddle.net/nLJ79/

note: after resize the result frame, hit 'run' button again.

JQUERY

$(document).ready(function () {
    $("#owl").owlCarousel({
        navigation: true,
        singleItem: true
    });
    $('.owl-pagination .owl-page, .owl-buttons div').on('click',function(){
        $('.owl-item div').css('height',$('.owl-item div').css('height'));
    });
});