Fluid Width

[ghost]

How can I set the fluidity of the carousel so that it respects change in width of the browser window?

[richardscarrott]

You just need to call the refresh method within the window resize event:

var el = $('.my-carousel').carousel();

$(window).on('resize', function () {
    el.carousel('refresh');
});

It's also often useful to bind to the orientationchange event for mobile devices too:

$(window).on('orientationchange', function () {
    el.carousel('refresh');
});

And if you're making use of media queries that could affect the carousel it might also be worth using the matchMedia API to add a listener to a mediaQueryList object.

[ghost]

I'm on Drupal 7 so I don't know if the syntax will be different since it runs an older version of jquery. It's 1.4.4 I believe...here is the code I'm using in my carousel .js file though and it doesn't seem to be refreshing when I resize my window...

Note: It seems to be all ways taking the max-width I have set for the .my-carousel....I use this so it doesn't overflow from the div.... here is the page i'm talking about:

http://folioh.com/dangoodman

[richardscarrott]

It looks like you're firing the refresh event correctly, it's really just a CSS issue you're having. I'd suggest going from something like this:

#user-sidebar {
    margin-right: 0;
}

#portfolio-center {
    float: none;
    margin-left: 0;
    overflow: hidden; /* prevents wrapping */
}

As this isn't an issue with the carousel I'm going to close this issue but hope this helps.

[ghost]

That helps a lot, thanks. However, the number of images that rotate doesn't seem to update.

Causing it to skip way ahead.

[richardscarrott]

Ah I see the issue, if you look in the error console you're getting "Uncaught TypeError: Object #

[ghost]

fantastic! Thank you so much!