具有多个项目的引导转盘和同一页面上的默认转盘

Question

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

当我尝试在.carousel-inner .prev / .next中只对第二个轮播应用CSS时，它不能正常工作。如果我删除#secondCarousel (在CSS选择器)，它可以工作，但会在第一个carousel中引起不希望的行为。

我所指的例子可以在下面的链接中看到。

Carousel default working | Carousel with multiple items working

有没有人有什么建议来解决这个问题？

Answer 1

您还需要为#firstCarousel提供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%; }