Question

这是一个自我Q＆amp; A。

我一直在用令人惊叹的CarouFredSel滑块插件开发很长一段时间了。每次我必须制作一个需要在宽度和高度上响应的全屏幻灯片时，我忘了怎么做。所以我为我和所有其他与之斗争的人做了这个Q＆amp; A。

所以，问题是：

如何制作全屏响应式CarouFredSel幻灯片？

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');
});

响应全屏CarouFredSel幻灯片

1 个答案: