Question

我正在制作一个循环2幻灯片中的裁剪和居中图像的解决方案。

我正在使用this plugin调整幻灯片中的图像并将其居中放置到父级。

我遇到的问题是我在转换后将图像居中，但这会导致每张幻灯片“跳转”到位。我似乎找不到在幻灯片init上居中所有图像的方法，并调整大小。

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

如果图像父级设置为display：none，则resizeToParent插件将不起作用。因为resizeToParent插件等待缓存图像，所以在大多数幻灯片已经设置为display：none之后才会运行。

在运行resizeToParent后，使用$（'。slideshow'）。cycle（）以编程方式启动幻灯片演示，所有内容似乎都按预期工作。

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

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

Fiddle!

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

1 个答案: