Responsive Fullscreen CarouFredSel Slideshow

问题:

This is a self Q&A.

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.

So, here is the question:

How do you make a fullscreen, responsive CarouFredSel slideshow?

回答1:

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