Carousel，旋转木马。就是一组可以循环显示的内容。其实就是一个幻灯片，每张幻灯片可以有自己的图片跟文字。在组件里面可以添加一些控制元素，可以控制幻灯片的播放 ..

先添加一个容器，上面加上一个 carousel ... 它里面可以包装整个旋转木马组件需要的东西 .. 内容可以再放在一个容器里，带一个 carousel-inner ..

它里面可以是每个幻灯片项目 .. 每个项目都单独再放在一个容器里 .. 项目的容器上要加上 carousel-item ..

先在每个项目里面放一张图片 .. 然后再复制两个项目 .. 修改一下图片的地方 .. 这个图片是我事先准备好的 .. 放在了项目的 img 这个目录下面了 .. 在初始要显示的项目的包装元素上要添加一个 active ..

我们可以设置一下图像元素的宽度，让它变成 100% ，再把 display 设置成 block .. Bootstrap 里面提供了两个工具类， d-block 这个类可以把元素的 display 属性设置成 block ..

再添加一个 w-100，这样会让元素的宽度变成 100%

把这两个类也添加到另外两个项目里的图像元素上 ..

转动

让这个旋转木马组件转起来，可以使用自定义的 data 属性，也可以用 JavaScript .. 先试一下用 data 属性。在组件的包装容器上添加一个 data-ride，对应的值设置成 carousel ..

这样在页面加载以后，会用 JavaScript 触发转动这个旋转木马 .. 默认间隔的时间是 5 秒钟 .. 转动的时候可以添加一个 slide 效果 .. 在包装上面再添加一个 slide 这个类 ..

这回转动旋转木马切换显示项目的时候，就会有个滑动的效果 ...