Question

我想知道是否可以给柔性滑板提供最小高度（确定它可以），但是滑块的图像会在左右两侧的视口溢出，所以图像的中间部分会在视口中间居中。与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>

比我在滑块插件中添加了start和before：

$('.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属性正在运行。

提前致谢。

Answer 1

你可以使用以下css：

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

Example

中心flexslider图像

1 个答案: