响应式站点需要条件 jquery答案

【问题标题】：Need conditional jquery for responsive site响应式站点需要条件 jquery
【发布时间】：2012-06-23 17:51:19
【问题描述】：

这里是新的但热衷于 jquery 的用户，请温柔:)

我正在使用出色的 caroufredsel（响应式 jquery 轮播），并且最初已对其进行了设置，因此我对滚动功能感到满意。

它正在显示吉他列表。目前只有 3 个，但我希望将来可以添加更多。

我正在构建一个响应式网站，在较小的屏幕尺寸上只有 2 个，然后一次可以看到 1 个吉他。问题是您从全角浏览器开始，当您调整到较小的屏幕时，jquery 不会重新触发以考虑到这一点。因此，您需要以较小的尺寸刷新屏幕以使滑块控件出现。

同样，如果您从小屏幕开始，当放大它时，即使它们在功能上无用，控件仍保留在屏幕上，因为所有项目都显示出来。

因此，我只希望控件在必要时可见（即，如果轮播的所有内容一次都可见，则不可见），并让它们在不刷新的情况下根据当前屏幕尺寸进行调整。

我相信这可以通过销毁轮播并在调整屏幕大小时重新启动它来实现，但我无法让它工作。

网站在线地址：http://www.wirebirdguitars.com/staging/guitars.html

任何帮助/建议将不胜感激。谢谢！！

【问题讨论】：

漂亮的网站 :-) 顺便说一句，这是“推荐”。
实际上，当您加载站点 atm 时，轮播并没有启动。您需要拥有您最初在其中的代码以及我在答案中输入的代码。这样它会在页面首次加载时启动，并在调整窗口大小时重新启动。
嗨 Jasper - 首先，非常感谢您的快速回复！我已经开始使用您的回复，但在回复之前确保我正确理解了它。它现在工作得很好！滚动似乎仍然有点不稳定 - 有时在屏幕重新调整大小后滚动多个项目，但它已经到了那里。感谢网站上好心的 cmets - 我刚开始作为一名网页设计师，很难但很有趣 :-) 再次感谢
希望你能解决这些问题——对于初学者来说，这个网站看起来很棒。我也不是初学者！
嘿 Jasper - 我发布了另一个问题来帮助我尝试真正完善它。再次感谢你的帮助。 stackoverflow.com/questions/11145041/…

标签： jquery conditional

【解决方案1】：

将此添加到您的 JS。

function doSomething() {

    $('#guitars-gallery').trigger('destroy');

    $("#guitars-gallery").carouFredSel({
    auto: false,
    circular: false,
    prev: '#prev',
    next: '#next',
    responsive : true,
    height : 'auto',
    items : { width : 400, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

灵感来自this question。

【讨论】：

加上这段代码，这是一个该死的性感响应式网站，@JOnathan Garner 先生 :-)