Bootstrap Carousel With Multiple Items And Default Carousel On The Same Page

I have a problem in applying CSS in a specific carousel on the page. When I try to apply CSS in .carousel-inner .prev / .next only to the second carousel does not work properly. If

Solution 1:

You need to have the CSS there as well for the #firstCarousel because you take the CSS from it when you assign it to just the #secondCarousel. Either do this:

#secondCarousel.carousel-inner.active.left { left: -33%; }
#secondCarousel.carousel-inner.next        { left:  33%; }
#secondCarousel.carousel-inner.prev        { left: -33%; }
#firstCarousel.carousel-inner.next        { left:  33%; }
#firstCarousel.carousel-inner.prev        { left: -33%; }

or leave a generic CSS set out like this:

.carousel-inner.next        { left:  33%; }
.carousel-inner.prev        { left: -33%; }