Question

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

我正在尝试使用Bootstrap Carousel，但是想要定制旋转木马丸以使用客户图像，而不是他们当前的形式。

我想要类似jquery Cycle pager.

的内容

有没有办法用Carousel做到这一点？有一个简单的方法吗？或者我最好使用jquery Cycle？

谢谢！

Answer 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

Answer 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/

Answer 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标签;然而，我的风格布局方式是必要的。

自定义Twitter Bootstrap轮播丸

3 个答案: