jQuery Cycle 2 响应式 w/ 居中幻灯片答案

【问题标题】：jQuery Cycle 2 Responsive w/ Centered SlidesjQuery Cycle 2 响应式 w/ 居中幻灯片
【发布时间】：2012-12-29 23:31:43
【问题描述】：

我正在尝试使用出色的 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%;
    }

非常感谢您的帮助！

【问题讨论】：

我认为您不应该对大于容器的图像使用居中。问题可能是幻灯片在所有（非常大的）图像加载之前就开始了。尝试将您的代码包装在 $(window).on('load',function(){...}) 中以规避此问题。

标签： jquery responsive-design jquery-cycle landscape-portrait

【解决方案1】：

在查看了您不合作的示例后，似乎内联样式可能会导致您有些头疼。这是第二张图片（鲤鱼）引用的 HTML：

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active">

这里要注意的是margin-left 属性设置为205px。要显示居中的动态或响应式图像，需要进行一些数学运算。您将需要使用 offsets 来完成此操作。将图像设置为left: 50% 将使图像的左侧与容器的中间对齐。到达那里后，您将使用一半宽度的负margin-left 将图像放入真正的中心。（例如，如果图像的宽度是 80px，那么您将使用 CSS left: 50%; margin-left: -40px;。

【讨论】：

【解决方案2】：

获取循环插件的未压缩版本： http://malsup.github.io/jquery.cycle2.center.js

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

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

这将解决 webkit 浏览器上奇怪的随机居中问题。

我在 malsup github 上为此打开了 an issue。希望这将很快进入已发布的版本。

【讨论】：

【解决方案3】：

这是另一种选择。

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

【讨论】：