【发布时间】：2021-06-08 04:22:11
【问题描述】：
在某种情况下，我正在向我的引导轮播添加一个类。添加此类后，我想更改 CSS，以便轮播中的所有图像一次显示，可能带有水平滚动条。有没有简单的方法来实现这种显示？
我知道有一种 Javascript 方法，您可以在其中迭代项目并将它们相互附加以在一个屏幕上显示多张幻灯片，但我认为 CSS 方法会更简洁。
编辑： 这是我用来生成轮播的代码：
<div class="container vcenter">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
@{
int counter = 0;
foreach (var carouselSlide in Model.Children)
{
if (counter == 0)
{
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
}
else
{
<li data-target="#myCarousel" data-slide-to="@counter"></li>
}
counter += 1;
}
}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
@{
counter = 0;
foreach (var carouselSlide in @Model.Children)
{
if (counter == 0)
{
<div class="item active">
@RenderImage(carouselSlide, x => x.Image, isEditable: true)
</div>
}
else
{
<div class="item">
@RenderImage(carouselSlide, x => x.Image, isEditable: true)
</div>
}
counter += 1;
} }
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
【问题讨论】：
-
您能否发布您的代码 - 您可以通过删除一些引导轮播类来实现这一点。
-
.carousel.slide- 这是幻灯片包装上唯一要删除的类。 -
我发现如果我将所有项目标记为活动，它们会同时垂直显示。理想情况下，它们会通过滚动水平并排显示。实际上，也许我可以将它们的包装器更改为内联块元素并将滚动添加到父 div
-
感谢您的帮助！看起来它现在正在融合在一起。我给了我的轮播溢出-x：滚动。然后我激活了每个轮播项目并将它们的显示更改为内联块并删除了我所有的其他 css 格式。
标签： jquery html css twitter-bootstrap carousel