【Bootstrap V4系列】学习入门教程之 组件-轮播（Carousel）高级用法
【Bootstrap V4系列】学习入门教程之 组件-轮播（Carousel）高级用法
- 轮播（Carousel）高级用法
- 2.5 Crossfade （淡入淡出）
- 2.6 Individual .carousel-item interval （单个轮播项目间隔）
- 2.7 Disable touch swiping（禁用触摸滑动）
- Usage
- Via data attributes（通过数据属性）
- Via JavaScript（通过JavaScript）
- Options （选项）
- Methods （方法）
- Events （事件）
轮播（Carousel）高级用法
2.5 Crossfade （淡入淡出）
向您的旋转木马添加.carousel-fade淡入淡出，以使用淡入淡出过渡而不是幻灯片来制作幻灯片动画。根据您的轮播内容（例如，纯文本幻灯片），您可能需要在.carousel-items 轮播项目中添加.bg-body 正文或一些自定义CSS，以进行适当的交叉缩放。
<!--淡入淡出 Crossfade-->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="../images/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/a1.jpg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button>
</div>页面展示效果：
2.6 Individual .carousel-item interval （单个轮播项目间隔）
将data-interval=""数据间隔添加到.carousel-item项目，以更改自动循环到下一个项目之间的延迟时间。
<!-- Individual .carousel-item interval 单个轮播项目间隔-->
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active" data-interval="10000"><img src="../images/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item" data-interval="2000"><img src="../images/2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/a1.jpg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button>
</div>页面展示效果：
2.7 Disable touch swiping（禁用触摸滑动）
旋转木马支持在触摸屏设备上左右滑动，以在幻灯片之间移动。可以使用data-touch 数据触摸属性禁用此功能。下面的示例也不包括data-ride 数据骑行属性，并且data-interval="false" 数据间隔为“false”，因此它不会自动播放。
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false"><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button>
</div>
页面展示效果：
Usage
Via data attributes（通过数据属性）
使用数据属性轻松控制转盘的位置。. data-slide数据幻灯片接受关键字prev或next，这会改变幻灯片相对于其当前位置的位置。
data-ride="carousel"属性用于将轮播标记为从页面加载开始的动画。如果你不使用data-ride="carousel" 来初始化你的轮播，你必须自己初始化它。它不能与同一转盘的（冗余和不必要的）显式JavaScript初始化结合使用。
Via JavaScript（通过JavaScript）
使用以下命令手动调用转盘：
$('.carousel').carousel()
Options （选项）
选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data-，如data-interval=""。
| Name | Type | Default | Description |
|---|---|---|---|
| interval | number | 5000 | 自动循环项目之间的延迟时间。如果为false，转盘将不会自动循环。 |
| keyboard | boolean | true | 转盘是否应对键盘事件做出反应。 |
| pause | string / boolean | ‘hover’ | 如果设置为“悬停”，则暂停鼠标输入上转盘的循环，并恢复鼠标离开上转盘的旋转。如果设置为false，将鼠标悬停在旋转木马上不会暂停它。 |
| – | – | – | ---- |
Methods （方法）
.carousel(options)
使用可选选项对象初始化转盘，并开始循环浏览项目。
$('.carousel').carousel({interval: 2000
})
.carousel('cycle')
从左到右循环浏览旋转木马项目。
.carousel('pause')
阻止转盘在项目间循环。
应用案例：
HML
<!--带控制装置 With controls-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="../images/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="../images/a1.jpg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button>
</div><div style="text-align: center;margin-top: 30px;"><input type="button" id="btn_stop" value="点击暂停"> <input type="button" id="btn_continue" value="点击继续">
</div>JavaScript
<script type="text/javascript">//轮播时间间隔设置为2s$('.carousel').carousel({interval: 2000});//点击暂停按钮，轮播将停止$('#btn_stop').click(function () {$('.carousel').carousel('dispose');});//点击继续按钮，轮播将继续$('#btn_continue').click(function () {$('.carousel').carousel('cycle');});</script>
页面展示效果：
Events （事件）
Bootstrap的轮播类公开了两个事件，用于连接轮播功能。这两个事件都具有以下附加属性：
direction 方向：转盘滑动的方向（“左”或“右”）。
relatedTarget：作为活动项滑入到位的DOM元素。
from：当前项目的索引
to：下一项的索引
所有轮播事件都是在轮播本身（即<div class="carousel">）触发的。
| Event Type | Description |
|---|---|
| slide.bs.carousel | 当调用slide实例方法时，此事件会立即触发。 |
| slid.bs.carousel | 当旋转木马完成幻灯片转换时，此事件会被触发。 |
$('#myCarousel').on('slide.bs.carousel', function () {// do something...
})