Bootstrap carousel with multiple elements and default carousel on the same page

Question

I have a problem using CSS in a separate carousel on a page.

When I try to apply CSS in .carousel-inner .prev / .next, only the second carousel does not work correctly. If I delete #secondCarousel(in the CSS selector), it works, but causes unwanted behavior in the first carousel.

An example of what I mean can be seen on the links below.

Carousel works by default | Carousel with several items working

Anyone have any suggestions for resolving it?

Answer 1

CSS #firstCarousel, CSS , #secondCarousel. :

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

CSS :

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