上一节:
下一节:

  Bootstrap 轮播图参考

  • 轮播 CSS 类

    下表总结了 Bootstrap 轮播 CSS 类：
    类名 描述 示例
    .carousel 创建轮播（幻灯片放映） 尝试一下
    .carousel-caption 为轮播中的每个幻灯片创建标题文本 尝试一下
    .carousel-control-next “下一个”轮播/项目链接的容器 尝试一下
    .carousel-control-prev “上一个”轮播/商品链接的容器 尝试一下
    .carousel-control-next-icon 与.carousel-control-next一起使用以创建“下一个”图标/按钮（向右箭头） 尝试一下
    .carousel-control-prev-icon 与.carousel-control-prev一起使用，以创建“上一个”图标/按钮（向左箭头） 尝试一下
    .carousel-indicators 在每张幻灯片的底部添加小点/指示器（指示圆盘传送带中有多少张幻灯片，以及用户当前正在查看的幻灯片） 尝试一下
    .carousel-inner 幻灯片容器 尝试一下
    .carousel-item 指定每张幻灯片的内容 尝试一下

  • 轮播选项

    可以通过数据属性或 JavaScript 传递选项；对于数据属性，将选项名称附加到 data-，如 data-interval="" 所示。
    参数 类型 默认值 描述 示例
    interval 数字或布尔值 5000
    指定每张幻灯片之间的延迟（以毫秒为单位）
    注意：将时间间隔设置为false可阻止项目自动滑动
    keyboard 布尔值 true
    指定轮播是否应对键盘事件做出反应：
    true-可以使用键盘的左右箭头浏览轮播（下一个和上一个）
    false-轮播无法使用键盘的左右箭头进行导航
    pause 字符串或布尔值 "hover"
    当鼠标指针进入圆盘传送带时，暂停圆盘传送带通过下一张幻灯片，并在鼠标指针离开圆盘传送带时恢复滑动
    注意：将pause设置为false可以停止悬停时悬停的功能
    wrap 字符串布尔值 true
    指定轮播是应该连续浏览所有幻灯片，还是停在最后一张幻灯片
    true-连续循环
    false-在最后一项停止

  • 轮播方法

    下表列出了所有可用的轮播方法。
    方法 描述 示例
    .carousel(options) 激活带有选项的轮播；查看上面的参数以获取有效值 尝试一下
    .carousel("cycle") 从左到右浏览轮播的item项 尝试一下
    .carousel("pause") 阻止旋转轮播穿过item项 尝试一下
    .carousel(number) 转到指定的item项（从零开始：第一个项目为0，第二个项目为1，依此类推。） 尝试一下
    .carousel("prev") 转到上一张轮播项 尝试一下
    .carousel("next") 转到下一张轮播项 尝试一下
    .carousel("dispose") 销毁轮播  

  • 轮播事件

    下表列出了所有可用的轮播事件。
    事件 描述 示例
    slide.bs.carousel 当轮播即将从一项滑动到另一项时发生 尝试一下
    slid.bs.carousel 当轮播完成从一项滑动到另一项时发生 尝试一下
    滑动事件还具有其他属性：
    属性 描述 示例
    direction 返回底部圆点传送带滑动的方向（向左或向右）  
    relatedTarget 返回作为active项滑入到位的DOM元素 尝试一下
    from 返回上一项的索引，然后继续进行下一项 尝试一下
    to 返回下一项的索引 尝试一下

  • 相关页面

上一节:
下一节: