jQuery Cycle 2 响应式带居中幻灯片

Question

我正在尝试使用优秀的 Cycle 2 jQuery 插件建立一个响应式图像库。该画廊将展示肖像和风景图像。

我正在使用“居中幻灯片”选项(Cycle2 的中心插件: http://jquery.malsup.com/cycle2/demo/center.php )，这似乎会在 Webkit 浏览器中引起问题(如果一开始不明显，请尝试调整浏览器窗口大小!)

http://goo.gl/NFFZk

绿色背景代表循环容器。

没有添加中心选项( data-cycle-center-horz=true data-cycle-center-vert=true )，整个事情运行良好，请参阅:

http://goo.gl/p76wi

我无法找出导致居中版本出现问题的原因。

图像上的 CSS 代码非常少:

.cycle-slideshow img {
    max-height: 100%;
    max-width: 100%;
}

包含元素的 CSS 在这里

.cycle-slideshow {
    background: green;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px auto;
    padding:0;
    width:80%;
    }

非常感谢您的帮助!

Answer 1

这是另一种选择。

$('.cycle-slideshow').on('cycle-initialized', function( event, opts ) {                
    $(window).trigger('resize');
});