准备一些图片还有文字，然后循环播放它们，每次只显示一个项目。这就是 Bootstrap 的旋转木马组件。其实就是提供了一个幻灯片的功能。在幻灯片上面，可以添加控制播放的按钮 .. 还有标识当前位置的小工具。

下面， 我们就去在这个页面上添加一个旋转木马的组件。幻灯片里面需要的图片，可以使用 holder.js 动态的生成 .... 把它下载下面来，放到项目里面，再把它嵌入到这个页面上 ...

然后在这个导航栏的下面，去添加这个旋转木马组件。

可以先用一组 .container 类的容器 ... 它可以为元素设置一个固定的宽度，并且可以居中的页面上显示。

div.container

然后在它的里面，先添加一组旋转木马需要的容器 ... 在它上面需要添加一个叫 carousel 的类 ...

div.carousel

我们可以把标识当前位置的小工具，幻灯片的每个项目，还有控制幻灯片播放的按钮都放到这个容器里面。这里，我们把去添加几个幻灯片的项目 ..

它们需要单独再放到一个容器里 .... 在它上面，要添加一个 carousel-inner ...

div.carousel-inner

然后每一个幻灯片项目都放到一组带 item 类的 容器里。

div.item

在这个幻灯片项目里面，先去添加一张图片 .. 这里我们可以使用 holders.js 去动态的生成图片 ...

<img src="holder.js/1200x500/auto/text:Bootstrap">

图片的地址，可以先是 holders.js ，然后加上图片的宽度还有高度 ... 后面的 auto 表示自动设置图片的尺寸 ... 在响应式的设计里面，可以加上这个 auto ... 最后又用了一个 text:Bootstrap ，意思就是，在图片上加上 Bootstrap 这个文字 ...

再复制一份这个幻灯片项目 ... 粘贴到它的下面 ... 修改一下项目里的图片 ... 可以只改一下图片上的文字 .... 改成 JavaScript ...

这样我们就定义好了两个幻灯片项目 ... 然后在幻灯片开始播放的那个项目的上面，添加一个 active 类 ...

如果想让幻灯片自动播放，还需要在这里加上一个 data-ride 属性 ... 把它的值设置成 carousel ...

保存 ... 再回到浏览器 ... 5 秒钟以后 ... 会切换到下一个幻灯片项目 ....

再回到编辑器 ... 在这个旋转木马的大容器上面，可以再添加一个 slide .... 这个类可以为播放的幻灯片添加一点过渡的效果 ...

保存 ... 再回到浏览器 ... 等待 5 秒钟 ...

在切换幻灯片的时候，会有一个滑动的动画效果 ...