jQuery第2周期响应式，带居中幻灯片

我正在尝试使用出色的Cycle2 jQuery插件建立一个响应迅速的图像库。画廊将同时展出肖像和风景图片

我正在使用以幻灯片为中心的选项（Cycle2的中心插件：），这似乎会在Webkit浏览器中造成问题（如果一开始不明显，请尝试调整浏览器窗口的大小！）

绿色背景表示循环容器

如果不添加中心选项（data cycle center horz=true data cycle center vert=true），整个系统运行良好，请参见：

我无法找出是什么导致了中央版本的问题

图像上的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%;
    }

---

非常感谢您的帮助

在回顾了不合作的示例之后，似乎内联样式可能会给您带来一些麻烦。下面是第二张图片（锦鲤鱼）所引用的HTML：

---

这里需要注意的是

marginleft

属性，该属性设置为

205px

。要显示居中的动态或响应图像，需要一点数学知识。您将需要使用偏移来完成此操作。将图像设置为

left:50%

将使图像的左侧与容器的中间对齐。到达后，您将使用一半宽度的负片

左边距

，将图像置于真实中心。（例如，如果图像的宽度为

80px

，则您将使用CSS

左：50%；左边距：-40px；

获取cycle插件的未压缩版本：

更改第17行（将加载添加到触发调整大小的事件列表中）：

这将修复webkit浏览器上奇怪的随机中心问题

我在malsup github上打开了它。希望它能很快进入发布版本。

这里是另一个选项

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

---

我认为您不应该使用比容器大的图像居中。可能问题是幻灯片放映是在加载所有（非常大）图像之前开始的。请尝试在

$（窗口）中包装代码。在（'load'，function（）{…}）

中绕过此问题。

$(window).on( 'resize orientationchange load', resize );

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