1

我正在使用带有响应图像的 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解决了高度问题，但我似乎无法将它与检查项目数量并根据窗口宽度销毁/创建轮播相结合。

任何帮助将不胜感激 - 我在这里扯头发。谢谢。

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

较小的要求更改是，我没有使用我的变量“numItems”，而是使用了插件的内置最小和最大项目。实际上，这意味着随着浏览器窗口变小，项目数变为 5 > 4 > 3，这实际上比从 5 跳到 3 更好。

然后我结合了以下两个问题的答案：

carouFredSel 响应高度

响应式站点需要条件 jquery

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

$(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();

});

希望这对某人有用。

4

0 回答 0