Bootstrap轮播在同一页面上有多个项目和默认轮播

Question

我在页面上的特定轮播中应用CSS时遇到问题。

当我尝试将.carousel-inner .prev / .next中的CSS仅应用于第二个轮播时，无法正常工作。如果我删除#secondCarousel（在CSS选择器中）它可以工作，但会在第一个轮播中导致不良行为。

我的意思的例子可以在下面的链接中看到。

Carousel default working | Carousel with multiple items working

任何人对如何解决都有任何建议？

Answer 1

您需要在#firstCarousel处拥有CSS，因为当您将CSS分配给#secondCarousel时，您需要使用CSS。要么这样做：

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