自定义 Twitter Bootstrap 轮播丸答案

【问题标题】：Customizing Twitter Bootstrap carousel pills自定义 Twitter Bootstrap 轮播丸
【发布时间】：2015-04-13 13:18:16
【问题描述】：

抱歉，这是一个愚蠢的问题。

我正在尝试使用 Bootstrap Carousel，但想自定义 carousel 药丸以使用客户图像，而不是当前形式。

我想要类似于jquery Cycle pager.的东西

有没有办法用轮播来做到这一点？有没有一种简单的方法可以做到这一点？还是我最好使用 jquery Cycle？

谢谢！

【问题讨论】：

标签： css twitter-bootstrap frontend

【解决方案1】：

这里有一个与您的问题相关的拉取请求：https://github.com/twitter/bootstrap/pull/4222

我相信可以通过编辑下面的原始 Bootstrap CSS 代码来实现：

    carousel-pills span {
     display: inline-block;
     margin: 0px 5px;
     width: 10px;
     height: 10px;
     .border-radius(15px);
     background: @grayDark;
     @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
     .box-shadow(@shadow);
     cursor: pointer;
     /* YOUR CSS HERE */
    }

这里还有关于如何完全禁用 .js https://github.com/twitter/bootstrap/pull/2777 中的默认药丸的信息

Stack Overflow 上有一个关于自定义指标的类似问题（使用新的 CSS 类替换默认的 Bootstrap 类）：twitter bootstrap custom carousel indicators

【讨论】：

【解决方案2】：

不完全是我的问题的答案，而是一个不错的选择。我最终改用 Jquery Cycle2。

<div class="cycle-slideshow" 
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-pager="#no-template-pager"
data-cycle-pager-template=""
data-cycle-slides="> div"
>
<div><img src="http://placehold.it/650x350/3f32fd/fff" width=650 height=350></div>
<div><img src="http://placehold.it/650x350/113f11/fff" width=650 height=350></div>
<div><img src="http://placehold.it/650x350/d3df3f/fff" width=650 height=350></div>
<div><img src="http://placehold.it/650x350/d32e11/fff" width=650 height=350></div>
</div>

<div id=no-template-pager class="cycle-pager external">
   <!-- using thumbnail image files would be even better! -->
<img src="http://placehold.it/80x80/3f32fd/fff" width=80 height=80>
<img src="http://placehold.it/80x80/113f11/fff" width=80 height=80> 
<img src="http://placehold.it/80x80/d3df3f/fff" width=80 height=80> 
<img src="http://placehold.it/80x80/d32e11/fff" width=80 height=80>
</div>

这是一个有效的 jsfiddle 示例。

http://jsfiddle.net/6E5zq/

【讨论】：

【解决方案3】：

您可以通过更改以下内容来使用自定义图像：

更改自定义指标

 .carousel-indicators li{
    background: url(../images/imagename.png) no-repeat !important;
    width:35px !important;
    height:35px !important;
    cursor: pointer !important;
    text-align:center !important;
    border:none !important;
}

更改活动指示器图像

.carousel-indicators li.active{
background: url(../images/imagenameactive.png) no-repeat !important;
}

请注意，对于响应式设计，使用 ems 或 % 代替 px 可能是更好的做法。您也可能不需要 !important 标签；然而，我的风格布局方式是必要的。

【讨论】：