Bootstrap多项目轮播和单页asp.net内的普通轮播

Question

我在http://www.bootply.com/IQ5RPxXjZ9中显示 6项多个轮播，在同一页面内有正常1项轮播。但由于下面的代码，正常的轮播无法从1张图像正确滑动到另一张图像。

@media (min-width: 992px ) {

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

如何让两个滑块在同一页面内正常工作？

Answer 1

2你的bootply只有1个滑块，但无论如何，要为两个滑块应用不同的CSS，它们需要有不同的ID，然后你会这样做：

@media (min-width: 992px ) {

    #slider1 .carousel-inner .active.left { left: -16.7%; }
    #slider1 .carousel-inner .next        { left:  16.7%; }
    #slider1 .carousel-inner .prev        { left: -16.7%; }  
    #slider2 .carousel-inner .active.left { left: 0; }
    #slider2 .carousel-inner .next        { left:  0; }
    #slider2 .carousel-inner .prev        { left: 0; }  
}

请注意左：0可能被任何东西替换，你可能会添加不同的样式，只是添加它作为一个例子，因为正如我所说，你只有一个滑块