1

我和许多其他人一样，希望可点击和样式化的分页与 Bootstrap 轮播一起运行，这样我就不必在 bootstrap 的顶部运行额外的 jquery 插件（例如 innerfade）。

我已经使用这个问题（和答案）Bootstrap Carousel Number active icon进行了尝试，但到目前为止还没有骰子，我看不出我在这里做错了什么。

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

请原谅我糟糕的js技能。

4

2 回答 2

6

这个对我有用:) http://jsfiddle.net/4WY6S/6/

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

这是“上一个”和“下一个”按钮的代码：

<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>
于 2012-06-11T13:47:21.077 回答
4

我已经查看了您的代码。我已经根据点击 1,2,3 数字添加了课程......但我无法为下一个上一个链接做同样的事情......

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

我已经编写了代码，但它被注释了......在该代码中，当我尝试收听这些点击事件时，我收到奇怪的错误消息，即这些链接上的未定义点击事件。

于 2012-06-11T05:36:07.680 回答