居中/裁剪图像 - 使用 Cycle2 插件的响应式幻灯片

Question

我正在研究一种解决方案，用于在 cycle2 幻灯片中裁剪和居中图像。

我正在使用此插件将幻灯片中的图像调整大小并将其居中到父级。

我遇到的问题是我在图像过渡后居中图像，但这会导致每张幻灯片"跳"到位。我似乎找不到一种方法将所有图像居中在幻灯片初始化上并调整大小。

function cropSlideImage() {
    $('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}
$( document ).ready(function() {
    cropSlideImage();
   $( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
      cropSlideImage();
  });
});

http://jsfiddle.net/mwHk4/1/

Answer 1

如果图像父项设置为显示：无，则调整大小到父级插件将不起作用。因为 resizeToParent 插件等待图像被缓存，所以它不会运行，直到大多数幻灯片已经设置为 display：none。

运行 resizeToParent 后，使用 $（'.slideshow'）.cycle（） 以编程方式启动幻灯片，一切似乎都按预期工作。

function cropSlideImage() {
    $('.slideshow img').resizeToParent();
}
$(document).ready(function() {
    cropSlideImage();
    $('.slideshow').cycle();
});

小提琴！