【问题标题】:twitter bootstrap carousel customize with numbers instead of arrowstwitter bootstrap carousel 使用数字而不是箭头自定义
【发布时间】:2012-08-16 07:52:27
【问题描述】:

这是我的第一篇文章,我正在尝试使用 twitter bootstrap 来学习 Rails。我正在使用轮播,我希望右下角包含可单击以更改图片的数字,而不是在图像的最左侧和右侧有箭头。例如,数字 1,2 和 3 可以在右下角的正方形中,并且每个都会更改显示的图像。我该怎么做?

【问题讨论】:

    标签: html css twitter-bootstrap carousel


    【解决方案1】:

    计划在里程碑 2.3 中向 Carousel 插件添加药丸导航。已经存在 a pull request which adds that functionality,因此您最好使用该版本的 bootstrap-carousel.js。但是,请注意这是新代码,可能会发生变化,因此如果您选择使用它,请准备好在整个生命周期中遵循它。

    这是更新插件的演示:

    JSFiddle

    目前它使用药丸,但将其更改为数字应该不会太难。可能只是添加一些代码,例如:

    $('.carousel-pills > span').each(function (i) {
      $(this).text(i+1);
    });
    

    在轮播初始化后运行它。您必须调整 LESS/CSS 才能将药丸从点更改为方框。

    【讨论】:

      猜你喜欢
      • 2013-02-20
      • 1970-01-01
      • 2012-05-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-03-04
      • 2019-07-12
      • 2018-07-16
      相关资源
      最近更新 更多