javascript - 使用标题而不是点创建 Bootstrap 轮播

Question

标准 Bootstrap 轮播可以包含点来更改幻灯片(bootstrap page 上的示例)。

但是，我最近阅读了Why Users Aren't Clicking Your Home Page Carousel建议使用标题而不是像下面这样的点:

在 Bootstrap 中可以使用这个选项吗？如果可以，我该怎么做？

Answer 1

您只需覆盖 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