Center flexslider images

Question

I was wondering if it is possible to give the flexslider a minimum height (sure it can), but that the images of the slider will overflow by the viewport at both sides, left and right, so the middle of the image will be centered in the middle of the viewport. Like with the trick of margin-left: -width.

I use the basic markup of the flexslider:

<section class="slider">
            <div class="flexslider">
                <ul class="slides">
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                    <li>
                        <img src="images/slide2.jpg" />
                    </li>
                </ul>
            </div>
        </section>

Than I added the start and before to the slider plugin:

$('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 5000,
        manualControls: ".custom-controls li",
        directionNav: false,
        useCSS: false, /* Chrome fix*/
        start: function(slider){
            $('body').removeClass('loading');

            $('.flexslider').css({
                position:'absolute',
                left: ($(window).width() - $('.flexslider').outerWidth())/2,
                top: ($(window).height() - $('.flexslider').outerHeight())/2
            });
        },
        before: function(slider) {
            $('.flexslider').css({
                position:'absolute',
                left: ($(window).width() - $('.flexslider').outerWidth())/2,
                top: ($(window).height() - $('.flexslider').outerHeight())/2
            });
        }
    });

But this is not working for me. I don't think I get the right elements here.. Tried also $('.flexslider .slides li img') but nothing seems to work of these selectors. Only the top property in above code is working.

Thanks in advance.

Answer 1

you can use the following css:

.flexslider {
   position:fixed;
   left:50%;
   top:50%;
   transform: translate(-50%, -50%);
}

Example