Multiple carousels, addNav

[mattbranthwaite]

I'm running into problems with multiple sliders on a page, all using the addNav parameter. All sliders except the last one on the page jump forward (the number of slides skipped depends on the number of sliders on the page). Anyone know why this is happening?

I've edited the demo version to re-create the problem i'm getting...

Example 1: Using 3 sliders on a page
http://matthewbranthwaite.co.uk/projects/responsive/example1.html

Issues:

• First slider - Click next and it jumps to slide 4
• Second slider - Click next andit jumps to to slide 3
• Third slider - works fine

Example 2: Using 4 sliders on a page
http://matthewbranthwaite.co.uk/projects/responsive/example2.html

Issues:

• First slider - Click next and it jumps to slide 5
• Second slider - Click next andit jumps to to slide 4
• Third slider - Click next and it jumps to slide 3
• Fourth slider - works fine

Any help appreciated,

Cheers,
Matt

[tomliv]

I am having this same issue. It's a real problem for me right now on a current project. Is there a workaround or another version I can download (download, not "pull")?

[informa]

I am also having the same issue, it doesn't seem to like having more than one version of the init .carousel running at the same time.

[tomliv]

Anyone have a work around for this multiple carousel issue yet??

[bleah]

Use the namespace variable. If you specify a unique namespace for each slider you won't get any collisions. Otherwise it just uses the default of 'carousel' for all of them.

[ricardozea]

I was having the same problem, your suggestion worked. However, there's a small issue with it, or well, with the carousel script itself:

If you have 2 or more carousels you'd need to use a different namespace per carousel in order for their pagination to work without skipping slides, ie:

namespace: 'carousel-1' and namespace: 'carousel-2'.

The namespace name you used is prefixed to a class -tabs in the <ol> of the pagination, ie:

<ol class="carousel-1-tabs" role="tablist navigation">.

So in order for you to style all carousels' paginations the same, you'd need to stack all selectors in the same declaration, which totally violates the concept of Cascading in stylesheets.

For example, for three different carousels that use pagination, instead of using one single rule to style all three paginations you need to stack the selectors:

.carousel-1, .carousel-2, .carousel-3 { padding:5px 10px; background:#ddd; }

[tomliv]

Not sure about "totally violates" but anyway, could you do:

[parent container] ol{ padding:5px 10px; background:#ddd; }

?

[ricardozea]

Good point.

Sure you can, but then you'd be creating additional HTML markup for the sake of styling, which in turn "violates" the concept of content separated from code separated from style :p

Minor workarounds no doubt, but workarounds nevertheless. We're lucky they turned out to be minor, I guess we should be grateful for that :)

[jweisbeck]

Encountered the same issue. Using the namespace variable indeed works. However, the more troublesome aspect is that the plugin uses the namespace as it's identifying class on the tablist navigation ordered list, replacing the generic '.carousel-tabs' that you'd use to style against. Now you'd have to add css for every carousel's navigation, as rzea suggests.

I think this can be fixed pretty easily in the plugin itself. Add a couple static classes to the tablist navigation that don't change, and they can be reliably styled against. I did that and it works.