Need conditional jquery for responsive site

Question

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

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

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.

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.

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

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

Answer 1

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);
});

Inspired by this question.