Question

我和许多其他人一样，想要使用Bootstrap轮播来运行可点击和可样式的分页，所以我不必在引导程序的顶部运行额外的jquery插件（例如。innerfade）。

我有一个机会使用这个问题（并回答）Bootstrap Carousel Number active icon但到目前为止没有骰子，我看不出我在这里做错了什么。

这是我的摆弄http://jsfiddle.net/adriatiq/V4SBt/（奇怪的是，小提琴中的分页工作而不是本地的）。如您所见，随着幻灯片的进展，编号不会跳过。

请原谅我可悲的js技巧。

Answer 1

<script type="text/javascript">
 var currentPage =0;
 $('#myCarousel').carousel({
         interval: 7000
     })
 $('#carousel-nav a').click(function(q){
    q.preventDefault();
    clickedPage = $(this).attr('data-to')-1;
    currentPage = clickedPage-1;
    $('#myCarousel').carousel(clickedPage);
    });
var pages = $("#carousel-nav a");
var pagesCount = pages.length;
$('#myCarousel').on('slide', function(evt) {
  $(pages).removeClass("active");
  currentPage++;
  currentPage=(currentPage%pagesCount);
  $(pages[currentPage]).addClass("active");
  });
</script>

以下是“Prev”和“Next”按钮的代码：

<a href="#" onclick="if(currentPage>0){currentPage=((currentPage-2)%3);$('#myCarousel').carousel(currentPage+1);}">PREVIOUS</a> | <a href="#" onclick="if(currentPage<2){$('#myCarousel').carousel(currentPage+1);}">NEXT</a>

Answer 2

我查看了你的代码。我根据点击1,2,3数字添加了这个类...... 但我无法对下一个上一个链接做同样的事情......

http://jsfiddle.net/V4SBt/1/

我已经编写了代码，但是已经注释了......在那段代码中，当我试图收听那些点击事件时，我发现了一些奇怪的错误，说明了那些链接上未定义的点击事件。

Bootstrap轮播分页/幻灯片编号问题

2 个答案: