自适应全屏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屋！