bootStrap4-轮播图
bootStrap->组件->轮播图
目录
- 常用类名
- 结构类名
- 动画设置
- 事件
- 代码示例
- 结构代码示例
- 事件使用Demo
- 测试demo（不直接填图片/修改图片大小）
常用类名
结构类名
| 类 | 描述 |
|---|---|
| .carousel | 创建一个轮播 |
| 指示符 | ---------------------------------------------------------------------------- |
| .carousel-indicators | 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。 |
| data-slide-to(属性) | data-slide-to="0"表示对应第几个图片 |
| .active | 表示激活 |
| 轮播图片 | (注意图片的大小设置)-------------------------------------------------------------------------- |
| .carousel-inner | 添加要切换的图片 |
| .carousel-item | 指定每个图片的内容 |
| .active | 表示激活，将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。 |
| .carousel-caption | 在图片上添加描述 |
| 左右切换按钮 | ------------------------------------------------------------------------- |
| .carousel-control-prev | 添加左侧的按钮，点击会返回上一张。 |
| .carousel-control-next | 添加右侧按钮，点击会切换到下一张。 |
| .carousel-control-prev-icon | 与 .carousel-control-prev 一起使用，设置左侧的按钮(样式，没有按钮依旧可以起作用) |
| .carousel-control-next-icon | 与 .carousel-control-next 一起使用，设置右侧的按钮 |
动画设置
选项
可以通过data-方法，定义此轮播组件的属性，方法是data-interval=""，实现JavaScript属性的注入，订制此组件的各种形态。
| 名称 | Type类型 | 默认值 | 描述 |
|---|---|---|---|
| interval | number | 5000 | 自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）-在调试CSS样式时这很实用。 |
| keyboard | boolean | true | 是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左<-右->方向键进行切换控制。 |
| pause | string boolean | “hover” | 如果设置为"hover", 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为false,则鼠标移上去轮播动画不会暂停。 在触摸屏幕上，当设置为"hover"属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。 请注意，这是上述鼠标行为的补充。 |
| ride | string | false | 在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。 |
| wrap | boolean | true | 转盘是否应该连续循环或难以停止。 |
事件
Bootstrap提供了两下事件给轮播控件使用，这两个事件都具有以下附加属性：
- direction: 轮播滚动的方向 ( “left” 或 “right”)。
- relatedTarget: 作为活动项目滑动到指定的DOM元素。
- from: 当前项目的项目的索引。
- to:下一个项目的索引。
所有的轮播事件都在轮播本身 (即 )下被触发。
| 事件类型Event Type | 描述 |
|---|---|
| slide.bs.carousel | 当用 slide方法时，此事件会立即触发。 |
| slid.bs.carousel | 轮播完成切换后，此事件即被触发。 |
代码示例
结构代码示例
事件使用Demo
$('#myCarousel').on('slide.bs.carousel', function () {// do something…
})
测试demo（不直接填图片/修改图片大小）
注意：导入css,js文件为本地文件，需要修改
轮播图测试
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！