jquery - 中心flexslider图像

我想知道是否可以给flexslider一个最小高度（确保可以），但是滑块的图像会在视口的左右两侧溢出，因此图像的中间居中视口的中间。就像使用margin-left的技巧一样：-width。

我使用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>

比起我在滑块插件中添加了开始和之前：

$('.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')，但这些选择器似乎没有任何作用。以上代码中只有top属性在起作用。

提前致谢。

最佳答案

您可以使用以下CSS：

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

Example

关于jquery - 中心flexslider图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31696885/

Flexslider

jquery - 中心flexslider图像