4.22、Bootstrap V4自学之路-----内容---轮播
示例
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img data-src="holder.js/600x300?theme=sky" alt="First slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#666" alt="Second slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#999" alt="Third slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300bg=#333" alt="4 slide"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
伪代码一下，看看结构。
《div id="carousel-example-generic" class="carousel slide" data-ride="carousel"》
--| 《ol class="carousel-indicators"》 这里是中下处的小圆点。点击可以切换
--| --| 《li data-target="#carousel-example-generic" data-slide-to="0"》 这里是每个小点的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="1"》 这里是每个小点的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="2"》 这里是每个小点的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="3"》 这里是每个小点的指向。
--| 《div class="carousel-inner" role="listbox"》 这里是图片盒子，listbox
--| --|《div class="carousel-item active"》 注意这里是激活状态。
--| --| --| 《img》 这里是图片0
--| --|《div class="carousel-item"》 这里是存放图片的div
--| --| --| 《img》 这里是图片1
--| --|《div class="carousel-item"》 这里是存放图片的div
--| --| --| 《img》 这里是图片2
--| --|《div class="carousel-item"》 这里是存放图片的div
--| --| --| 《img》 这里是图片3
--| 《a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"》这里是prev按钮。
--| --| 《span class="icon-prev" aria-hidden="true"》 这里加载图片-箭头左
--| --| 《span class="sr-only"》 这里是辅助设备使用说明。我很喜欢这个。
--| 《a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"》这里是prev按钮。
--| --| 《span class="icon-next" aria-hidden="true"》 这里加载图片-箭头左
--| --| 《span class="sr-only"》 这里是辅助设备使用说明。我很喜欢这个。
PS：如果使用图片处没有写 .active类。则轮播框不会出现。
PS：出存在两个 .active类。那如下图所示，控件按钮将会发生混乱。
第一个可以控制，第二个只能自己轮播。
过渡动画在IE 9中不受支持。
需要初始化活跃的元素。需要给其中滑块中的一个添加.active类。否则，轮播将不可见。
PS：这个功能有一个bug，就是当第一页是时，中下部的翻页圆点不高亮。对于处女座的我感觉有点挠心。
可用的选项
在任何的.carousel-item元素上都可以轻松的通过使用.carousel-caption来给你的幻灯片加上说明文字。在那里面加上任何可选的 HTML，都将自动对齐和格式化。
<div class="carousel-item active"> <img data-src="holder.js/600x300?theme=sky" alt="First slide"> <div class="carousel-caption"> <h4>标题~</h4> <p>内容！！！<br>1</p> <p>内容！！！<br>1</p> </div> </div>
伪代码：其实看一下，就是在. carousel-item中加入了一个<div class=carousel-caption>使这个div浮在窗体上方。
<div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
易用性问题
轮播组件通常与易用性原则并不冲突。如果你需要被约束的轮播，把请考虑用别的选项呈现你的内容。
这里理解是，如果想要使用超出BS自带这个轮播组件的功能，加自己添添改改。
如果出了问题解决不了，就另请高明，加载别的插件吧。
用法
多个轮播
轮播要求在最外层的容器（即该.carousel）中用一个id，来让轮播控件正常工作。如果添加多个轮播，或者修改了一个轮播的id，请务必要更新相关的控件。
根据多个不同的#id控制多个轮播组件同时工作。
利用data属性
使用data属性可以轻松控制轮播的滑动方向。data-slide接受一个关键词prev或者next，它用于改变当前滑动的方向。另外，使用data-slide-to可以向轮播传递一个原生的索引。data-slide-to="2"可以让轮播把滑动位置转到特定的索引，这个索引从0开始计数。
data-ride="carousel"属性用来标记一个轮播在网页载入时动画的起点。它不能用于结合JavaScript显式初始化同一个轮播（这样是冗余和不必要的）。
利用JavaScript
调用轮播：
$('.carousel').carousel()
选项
可以利用data属性或者JavaScript传递选项。
如果用data属性，请把选项名追加到data-后面，比如说写成data-interval=""。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| interval | number | 5000 | 这个时间数值用来指定两次自动滚动之间的延迟。如果设置为false，轮播就不会自动滚动。 |
| pause | string | "hover" | 当鼠标进入时中断轮播的滚动，当鼠标离开时恢复轮播的滚动。 |
| wrap | boolean | true | 轮播需要持续滚动，还是拥有一个硬停顿？ |
| keyboard | boolean | true | 轮播是否需要响应键盘事件？ |
方法
.carousel(options)
用一个可选的选项object初始化轮播，开始滚动帧。
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
从左到右开始滚动轮播。
.carousel('pause')
停止滚动轮播。
.carousel(number)
轮播滚动到一个特定的帧（基数是0，类似于一个数组。）
.carousel("prev')
滚到前一帧
.carousel("next")
滚到下一帧。
事件
Bootstrap的轮播类插件为轮播相关的回调函数提供了事件接口。这些事件都有下面的额外的属性：
direction: 方向：轮播滑动的方向（可以是"left"或者"right"）。relatedTarget: 滑动到中间位置的DOM对象，即激活项。
所有的轮播事件在轮播自身上触发（即，在<div>上面触发）。
| 事件类型 | 描述 |
|---|---|
| slide.bs.carousel | 在调用slide行为的时候，会立即触发该事件。 |
| slid.bs.carousel | 在滑动过渡完成的时候会触发该事件。 |
$('#myCarousel').on('slide.bs.carousel', function () { // do something… })
例子
这里研究到现在发现的解决办法。先上例子
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval=""> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img data-src="holder.js/600x300?theme=sky" alt="First slide"> <div class="carousel-caption"> <h4>标题~</h4> <p>内容！！！<br>1</p> <p>内容！！！<br>1</p> </div> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#666" alt="Second slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300?bg=#999" alt="Third slide"> </div> <div class="carousel-item"> <img data-src="holder.js/600x300bg=#333" alt="4 slide"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<button type="button" onclick="text()">ddd </button>
<script type="text/javascript">
function text(){
$('#carousel-example-generic').carousel({interval:500});
$('#carousel-example-generic').carousel('next');
$('#carousel-example-generic').carousel();
}
</script>
将代码分为两段：第一段是轮播框。在轮播框的最外层加入属性data-interval=""后，使用下面的语句，生效。
$('#carousel-example-generic').carousel({interval:500});
PS：这里有一个问题，当给最外层设置data-interval=空时。轮播页面是不滚动的。
按下按钮ddd时，才给赋值。这里摘录一段话，之前一直忽略的。
可以利用data属性或者JavaScript传递选项。如果用data属性，请把选项名追加到data-后面，比如说写成data-interval=""。
应对这个问题，可以考虑轮播组件如果自定义的话，添加初始赋值的方式。
PS：使用.carousel("prev"),无需添加data-*。
但同样的方法对"cycle"无效，我很费解。mark！