Question

我正在使用带有响应式图像的caroufredsel插件，但滑块正在获得图像的整个高度（在它们调整大小之前）并在底部留下很大的间隙。

在window.resize函数中调用该函数，因为我需要不断检查窗口的宽度。我需要这样做，因为显示的项目数量必须变化，如果窗口低于一定宽度，我必须销毁轮播并只显示所有项目。

这是我的代码：

$(document).ready(function(){
$(window).resize(function(){
var numItems;
var width = $(window).width();
if(width >=769) {
    numItems = 5;
} else {
    numItems = 3;
}
var carousel = $("#carousel");
$("#carousel").carouFredSel({       
    responsive  : true,
    scroll      : 1,
    items       : {
        visible     : numItems,
        width       : 200
    },
    onCreate : function () {
        carousel.parent().add(carousel).css('height', carousel.children().first().height() + 'px');
    }
});
if (width <=480){
    $("#carousel").trigger("destroy");
}
}).resize();//trigger the resize event on page load.
});

这个问题的解决方案：carouFredSel responsive height解决了高度问题，但我无法将其与能够检查项目数量并根据窗口宽度销毁/创建轮播相结合

任何帮助都会非常感激 - 我在这里撕开我的头发。感谢。

修改的我有一个不错的解决方案。我确实稍微改变了我的要求，但我认为即使我没有这样做也会有效。

次要要求的变化是，我只使用了插件的内置min和max项而不是使用我的变量“numItems”。实际上，这意味着项目的数量为5> 4> 3当浏览器窗口变小时，实际上比从5跳到3更好。

然后我将以下两个问题的答案结合起来：

carouFredSel responsive height

Need conditional jquery for responsive site

这设法让它运作起来。这是我最终得到的代码：

$(document).ready(function(){


 function imageCarousel() {

var carousel =  $('#carousel');

var width = $(window).width();
if(width <=480) {
     carousel.trigger('destroy');
}

else {

carousel.carouFredSel({
auto: true,
responsive: true,
height : 'auto',
scroll: {
    items : 1
},
 swipe: {
    onTouch: true,
    items: 3
},
items : {
        visible     : {
            min    : 3,
            max    : 5
        },
        width       : 200
    },
    onCreate : function () {
        carousel.parent().add(carousel).css('height', carousel.children().first().height() + 30 + 'px');
    }

});

}

 $("#prev").on("click", function(){
    $("#carousel").trigger("prev");
});
$("#next").on("click", function(){
    $("#carousel").trigger("next");
});

};

var resizeTimer;

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(imageCarousel, 0);
}).resize();

});

希望这对某人派上用场。

caroufredsel图像轮播的响应高度问题

0 个答案: