中心挠性滑块图像

Question

我想知道是否有可能给柔性滑块一个最小的高度(当然可以)，但是滑块的图像会在左右两侧的视口溢出，所以图像的中间将集中在视口的中间。就像左边框的技巧：-width。

我使用了挠性滑块的基本标记：

<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>

而不是我在滑块插件中添加了开始和之前的内容：

$('.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
            });
        }
    });

但这对我没用。我想我找不到合适的元素了..。也尝试过$('.flexslider .slides li img')，但这些选择器似乎什么也不起作用。只有上面代码中的顶层属性才能工作。

提前谢谢。

Answer 1

您可以使用以下css：

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

示例