jquery - Multiple Twitter's Bootstrap 2.x carousels on same page with different sizes -

i'm wanting have 'long thin' carousel page header, , 'conventional' dimensioned carousel in body of page. each has different positional elements in css, example long, thin one:

.carousel .item {   height: 156px; } .carousel img {   position: absolute;   top: 0;   left: 0;   min-width: 100%;   height: 156px; } 

the conventional one:

.carousel .item {   height: 500px; } .carousel img {   position: absolute;   top: 0;   left: 0;   min-width: 100%;   height: 500px; } 

if try change .carousel .carousel2 1 instance, doesn't work (presumably, name required create carousel, changing ruins it!)

is there way - or need implement other jquery slider?

use unique id each carousel instead of .carousel class. b.e. id="mycarousel1", id="mycarousel2", etc. see also: https://stackoverflow.com/a/10521804/1596547.

start carousal via javascript like:

   $('#mycarousel1, #mycarousel2').carousel(); 

apply css rules on id's like:

#mycarousel2 .item {   height: 600px; } #mycarousel2 img {   position: absolute;   top: 0;   left: 0;   min-width: 100%;   height: 600px; } 

see also: http://bootply.com/66023