引导轮播。在底部添加分页点答案

【问题标题】：Bootstrap carousel. Add pagination dots to bottom引导轮播。在底部添加分页点
【发布时间】：2013-12-17 02:55:58
【问题描述】：

如何将分页像点一样添加到现有的轮播中以进行引导。

它需要通过点自动移动。

对此非常陌生，需要一些帮助。

这是我的代码：

http://jsfiddle.net/mdesignone/qXgCg/

谢谢:)

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

此功能当前为 slated to be included in the 2.3 milestone（当前为 2.1）。目前有一个 pull request 已经实现了这个功能，我建议使用它而不是自己动手，因为一旦该功能正式集成，它更有可能与最终的 API 保持一致。

插件的源代码可以在mikaelbr's fork of the Bootstrap project 中找到。您将需要 bootstrap-carousel.js 和 carousel.less。

这是一个演示：

JSFiddle

【讨论】：

只想更新并说（对于任何不知道的访问者）Bootstrap 2.3 已于今天早上发布。

【解决方案2】：

使用最新的轮播，您可以使用 carousel-indicators 类：

 <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

http://getbootstrap.com/javascript/#carousel

【讨论】：

我认为这个问题是关于 TB 2.x，carousel-indicators 仅适用于 3.x

【解决方案3】：

这是一种有点老套的方法，因为我也必须为我的网站这样做。更新小提琴：http://jsfiddle.net/qXgCg/2/

//Javascript   
var slider = $(".carousel-inner") 
.carousel({ interval: 5000 }) 
.bind('slid', function() { 
var index = $(this).find(".active").index(); 
$(this).find("a").removeClass('pager-active').eq(index).addClass('pager-active'); 
}); 

$(".slider-pager a").click(function(e){ 
  var index = $(this).index(); 
  slider.carousel(index); 
  e.preventDefault(); 
}); 

/* css */
.slider-pager        {    margin-top: 10px; }
.slider-pager a    {    display: block; height: 10px; width: 10px; float: left; margin-right: 10px; border-radius: 50%; background: #41af96; font-size: 1px; color: #fff; text-indent: -9999px; }
.slider-pager a.pager-active { background: #2c8571; }

<!--html --->
<div class="slider-pager">
<a href="#main-slider" class="pager-active">0</a>
<a href="#main-slider">1</a>
<a href="#main-slider">2</a>
</div>

【讨论】：