3

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?

Drew Baker
  • 14,154
  • 15
  • 58
  • 97

1 Answers1

3

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');
});
Drew Baker
  • 14,154
  • 15
  • 58
  • 97
  • When using images of different sizes, is it possible to have the images keep their ratio? As they are stretching to fill the window – ckhatton Feb 17 '15 at 16:59
  • 1
    I normally use DIVs for the slides, then apply the image as a background-image, and use background-size: contain to do that. – Drew Baker Feb 17 '15 at 18:18
  • Dude! Why did I not think of that! I will give it a try – ckhatton Feb 19 '15 at 11:00
  • Thing is now though, because they are DIVs, they don't have a set size, or one that carouFredSel understands... I keep getting `carouFredSel: Set a width for the items!`. Any idea? – ckhatton Feb 19 '15 at 14:34
  • Thats what the "sizeGallery" function above does. Sizes the div with class "slide". – Drew Baker Feb 19 '15 at 18:45
  • Even though I have that bit assigning the height and width for each slide, it seems to ignore it - I have tried even setting it via prop() and attr(), but still no joy - I don't think it is having too much of an impact though – ckhatton Feb 20 '15 at 07:21
  • 1
    Just a note for everyone, you'd be better off using Cycle2 to do this now days. – Drew Baker May 22 '15 at 17:50