响应式全屏 CarouFredSel 幻灯片 [英] Responsive Fullscreen CarouFredSel Slideshow

问题描述

这是一个自我问答.

我已经使用令人惊叹的 CarouFredSel 滑块插件进行了很长时间的开发.每次我必须制作需要宽度和高度响应的全屏幻灯片时，我都忘记了该怎么做.所以我为我和所有其他为此而苦苦挣扎的人做了这个问答.

I've been developing with the amazing CarouFredSel slider plugin for a long time now. And everytime I have to make a fullscreen slideshow that needs to be responsive in width and height, I forget how to do it. So I made this Q&A for me and all the other people that struggle with that same.

那么，问题来了:

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

推荐答案

关键是在启动 CarouFredSel 之前调整幻灯片的大小，然后在窗口调整大小时刷新图库和幻灯片大小.我在初始化 CarouFredSel 时也要注意高度和响应参数.

The key is to size the slides before starting CarouFredSel, and then refresh both the gallery and slide sizes on window resize. Pay attention to the height and responsive parameters when I init CarouFredSel too.

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 幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！