javascript – 使用标题而不是点创建bootstrap轮播

标准自举轮播可以包含更换幻灯片的点(例如 bootstrap page).

但是,我最近阅读了Why Users Aren’t Clicking Your Home Page Carousel,建议使用字幕代替下面的点：

引导程序中是否可以使用此选项？如果是这样,我该怎么办？

解决方法

您可以通过覆盖轮播指示器列表项上的样式来执行此操作.

这是一个典型的指标部分：

<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样式：

通过添加宽度和高度并删除border-radius,将显示从点转换为矩形：

然后通过删除Bootstrap添加的否定文本缩进来获取文本：

最后,添加你自己的背景和边框和风格,不管你喜欢什么.
完整样式应如下所示：

.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