【问题标题】:Bootstrap carousel pagination / slide numbering issueBootstrap轮播分页/幻灯片编号问题
【发布时间】:2012-06-14 00:58:20
【问题描述】:

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

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

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

请原谅我糟糕的 js 技能。

【问题讨论】:

    标签: javascript jquery css twitter-bootstrap carousel


    【解决方案1】:

    这个对我有用:) 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>
    

    【讨论】:

      【解决方案2】:

      我查看了您的代码。我添加了基于单击 1、2、3 数字的类... 但我无法为下一个上一个链接做同样的事情......

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

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

      【讨论】:

      • 感谢 Vins,它似乎在小提琴和本地都可以正常工作。我试图在检查器中找到该错误,但我在 js 调试方面很垃圾。
      • 您可以使用 Google chrome 按 ctrl + Shift + i 调试您的 javascript,然后导航到控制台以查看错误。在firefox上可以安装firebug进行js调试。
      猜你喜欢
      • 1970-01-01
      • 2021-12-03
      • 1970-01-01
      • 1970-01-01
      • 2012-04-16
      • 2018-06-02
      • 1970-01-01
      • 2016-11-01
      • 1970-01-01
      相关资源
      最近更新 更多