需要条件jQuery的响应网站 [英] Need conditional jquery for responsive site

问题描述

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

New but keen jquery user here, please be gentle :)

我正在使用出色的 caroufredsel (响应式jquery轮播)，并且最初已对其进行设置，所以我对滚动功能感到满意.

I am using the fantastic caroufredsel (responsive jquery carousel), and have set it up initially so I am happy with the scrolling functionality.

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

It is displaying a list of guitars. Currently there are only 3, but I want to allow for more to be added in the future.

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

I am building a responsive site, and at smaller screen sizes only 2, and then 1 guitar is visible at a time. The problem is that is you start with a full-width browser, when you resize to a smaller screen, the jquery doesn't re-fire to take this into account. Therefore you need to refresh the screen at the smaller size to make the slider controls appear.

就像从小屏幕开始一样，放大时，即使所有功能都显示出来，控件也仍然在屏幕上，即使它们在功能上没有用.

Like-wise if you start with a small screen, when enlarging it, the controls remain onscreen even though they are functionally useless, as all of the items are showing.

因此，我只希望控件在必要时可见(即，如果轮播的所有内容都可见，则不希望)，并让它们根据当前屏幕大小进行调整而无需刷新.

I therefore only want the controls to be visible if necessary (ie, not if all the contents of the carousel are visible at once), and for them to adjust in response to the current screen size without a refresh.

我相信可以通过在屏幕调整大小时销毁转盘并重新启动来实现，但我只是无法使其正常工作.

I believe this is possible by destroying the carousel and re-firing it when the screen is resized, but I just cannot make it work.

该站点在以下地址在线: http://www.wirebirdguitars.com/staging/guitars.html

The site is online at this address: http://www.wirebirdguitars.com/staging/guitars.html

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

Any help / suggestion would be truly appreciated. Thanks!!

推荐答案

将此添加到您的JS中.

Add this to your 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);
});

受此问题的启发.

这篇关于需要条件jQuery的响应网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！