响应式全屏CarouFredSel幻灯片展示

Question

这是一个自问自答。

我已经使用了令人惊叹的CarouFredSel幻灯片插件很长一段时间了。每当我需要制作一个宽度和高度都要响应的全屏幻灯片时，我总是忘记如何做。因此，我为自己和所有其他与我有同样困扰的人制作了这个Q&A。

那么，问题来了：

如何制作一个全屏、响应式的CarouFredSel幻灯片？

- Drew Baker

Answer 1

关键是在启动CarouFredSel之前调整幻灯片的大小，然后在窗口大小调整时刷新画廊和幻灯片大小。当我初始化CarouFredSel时，请注意高度和响应参数。

function sizeGallery(){

    // Set size of slides and gallery
    var winHeight = jQuery(window).height();
    var winWidth = jQuery(window).width();
    jQuery('.gallery, .gallery .slide').width(winWidth).height(winHeight);      

}

function startGallery() {

    // Start carouFredSel as a Fullscreen slideshow
    jQuery('.gallery').carouFredSel({
        circular: true,
        infinite: true,
        responsive: true,
        height: 'variable',
        scroll: {
            items: 1
        },
        items: {
            visible: 1,
            height: 'variable'
        }
    });

}

jQuery(document).ready(function(){
    sizeGallery();
    startGallery();
});

jQuery(window).resize(function(){
    sizeGallery();  
    jQuery('.gallery').trigger('updateSizes');
});

- Drew Baker

---

当使用不同尺寸的图像时，是否可以使图像保持其比例？因为它们正在拉伸以填充窗口。 - Crimbo

我通常使用 DIV 来制作幻灯片，然后将图像应用为背景图像，并使用 background-size: contain 来实现。 - Drew Baker

哥们儿！我怎么没想到呢！我会试一下的。 - Crimbo

现在的问题是，因为它们是DIV，它们没有固定的大小，或者说carouFredSel无法理解它们的大小...我一直收到“carouFredSel：为项目设置宽度！”的提示。有什么想法吗？ - Crimbo

提醒大家一下，现在最好使用Cycle2来完成这个任务。 - Drew Baker