0

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!!

Jonathan Garner
  • 206
  • 3
  • 11
  • Nice-looking site :-) It's 'testimonials' btw. – Jasper Mogg Jun 21 '12 at 13:25
  • Actually, when you load your site atm, the carousel isn't starting up. You need to have the code you originally had in there ***as well as*** the code I put in my answer. That way it'll start when the page is first loaded, as well as restarting when the window is resized. – Jasper Mogg Jun 21 '12 at 15:21
  • Hi Jasper - First up, thanks so much for your quick reply! I had started to use your reply, but was making sure I understood it properly before replying. Its working really nicely now! It seems the scrolling is still a bit erratic - sometimes scrolling through more than one item after a screen re-size, but it's getting there. Thanks for the kind comments on the site - I'm just starting out as a web designer and it's hard but fun getting it just right :-) Thanks again – Jonathan Garner Jun 21 '12 at 17:15
  • Well hopefully you get those kinks ironed out - for a beginner that site looks awesome. Not that I'm anything other than a beginner either! – Jasper Mogg Jun 21 '12 at 17:21
  • Hey Jasper - I have posted another question to help me try to really polish it up. Thanks again for your help. http://stackoverflow.com/questions/11145041/responsive-issue-with-caroufredsel-jquery-carousel – Jonathan Garner Jun 21 '12 at 19:18

1 Answers1

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.

Community
  • 1
  • 1
Jasper Mogg
  • 924
  • 2
  • 8
  • 23