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

前端之家收集整理的这篇文章主要介绍了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

@L_502_3@

您甚至可以将整个CSS包装在媒体查询中,这样当屏幕大小变得有限时,您会默认返回点而不是笨拙地堆叠列表项:

@media screen and (min-width: 550px) {
    /* Wrap CSS Here */
}

Responsive Demo in Fiddle

原文链接:https://www.f2er.com/js/155937.html

猜你在找的JavaScript相关文章