具有多个项目的Bootstrap轮播和同一页面上的默认轮播 [英] Bootstrap carousel with multiple items and default carousel on the same page

问题描述

在将CSS应用于页面上的特定轮播中时遇到问题.

I have a problem in applying CSS in a specific carousel on the page.

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

When I try to apply CSS in .carousel-inner .prev / .next only to the second carousel does not work properly. If i remove #secondCarousel (at CSS selector) it works, but cause undesirable behavior in the first carousel.

在下面的链接中可以看到我的意思的示例.

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

轮播默认工作 |具有多个项目的旋转木马

有人对如何解决有任何建议吗?

Anyone have any suggestions on how to solve it?

推荐答案

您还需要为 #firstCarousel 提供CSS，因为将CSS分配给 #secondCarousel .要么这样做:

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

或保留如下所示的通用CSS:

or leave a generic CSS set out like this:

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

这篇关于具有多个项目的Bootstrap轮播和同一页面上的默认轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！