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！

来源：oschina

链接：https://my.oschina.net/u/199513/blog/647540