标准 Bootstrap 轮播可以包含点来更改幻灯片(bootstrap page 上的示例)。
但是,我最近阅读了Why Users Aren't Clicking Your Home Page Carousel建议使用标题而不是像下面这样的点:
在 Bootstrap 中可以使用这个选项吗?如果可以,我该怎么做?
最佳答案
您只需覆盖 carousel-indicators
列表项上的样式即可完成此操作。
这是一个典型的指标部分:
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
<li data-target="#myCarousel" data-slide-to="1">Two</li>
<li data-target="#myCarousel" data-slide-to="2">Three</li>
</ul>
您需要覆盖一些默认的 Bootstrap 样式:
通过添加 width
和 height
并删除 border-radius
将显示从点转换为矩形:
然后通过删除 Bootstrap 添加的否定 text-indent
来取回文本:
最后,添加您自己的 background
和 border
以及您喜欢的其他样式。
完整的样式应如下所示:
.carousel-indicators > li,
.carousel-indicators > li.active{
width: 100px;
height: 25px;
border-radius: 0;
border: solid 1px grey;
background: lightgrey;
text-indent: 0;
}
.carousel-indicators > li.active {
background: white;
}
Working Demo in Fiddle
您甚至可以将整个 CSS 包裹在媒体查询中,这样当屏幕尺寸受限时,您默认回到点而不是笨拙地堆叠列表项:
@media screen and (min-width: 550px) {
/* Wrap CSS Here */
}
Responsive Demo in Fiddle
关于javascript - 使用标题而不是点创建 Bootstrap 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23516861/