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%; }