jQuery 引导轮播。在底部添加分页点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12271827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel. Add pagination dots to bottom
提问by user1631763
How would it be possible to add pagination as in dots to the existing carousel for bootstrap.
如何将分页（如点）添加到现有的引导程序轮播中。
It needs to move automatically through the dots.
它需要通过点自动移动。
Very new to this and need a little hand.
对此非常陌生，需要一点帮助。
Here is my code:
这是我的代码：
http://jsfiddle.net/mdesignone/qXgCg/
http://jsfiddle.net/mdesignone/qXgCg/
Thanks:)
谢谢：）
回答by merv
This feature is currently slated to be included in the 2.3 milestone(currently at 2.1). There is presently a pull requestwhich already implements this functionality, and I would recommend using it rather than rolling your own, as it is more likely to be consistent with the final API once the feature gets integrated officially.
此功能目前计划包含在 2.3 里程碑（目前为 2.1）中。目前有一个已实现此功能的拉取请求，我建议使用它而不是自己滚动，因为一旦该功能正式集成，它更有可能与最终 API 保持一致。
The source for the plugin can be found in mikaelbr's fork of the Bootstrap project. You will require both the bootstrap-carousel.jsand the carousel.less.
该插件的源代码可以在mikaelbr's fork of the Bootstrap project 中找到。您将需要bootstrap-carousel.js和carousel.less。
Here is a demo:
这是一个演示：
JSFiddle
JSFiddle
回答by Kien Pham
With latest carousel, you can use carousel-indicatorsclass:
使用最新的轮播，您可以使用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>
回答by Sean Thompson
Here's a somewhat hacky way of doing it, as I had to do this as well for my site. Updated Fiddle: http://jsfiddle.net/qXgCg/2/
这是一种有点hacky的方法，因为我也必须为我的网站这样做。更新小提琴：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>
