Css 定制推特引导旋转木马

对不起，如果这是一个愚蠢的问题

我正在尝试使用引导旋转木马，但希望自定义旋转木马以使用自定义图像，而不是其当前形式

我想要一些类似的

有没有办法用旋转木马做到这一点？ 有没有一个简单的方法可以做到这一点？还是使用jquery循环更好

---

谢谢

这里有一个与您的问题相关的请求：

我相信通过编辑以下原始引导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中完全禁用默认药片的信息

---

关于自定义指示符（使用新的CSS类替换默认的引导类）的堆栈溢出，这里有一个类似的问题：

这不是我问题的答案，而是一个不错的选择。 我最终改用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>

下面是一个正在工作的JSFIDLE示例

---

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

更改自定义指示器的步骤

 .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。你也可能不需要这个！重要标签；然而，我的风格布局是必要的