去掉旋转木马包装元素上的这个 data-ride 属性 .. 暂时不让它自动旋转 .. 下面我们可以在旋转木马里添加点控制元素 ..

在这个 carousel-inner 的外面 .. 添加一个 a 标签 .. 上面加上 carousel-control-prev .. 还得有个 data-slide 属性，对应的值是 prev ..

它里面添加一个向左的小箭头 .. 一个 span 标签，上面加上 carousel-control-prev-icon ..

复制一份 .. 修改一下 ，元素上的类是 carousel-control-next .. 再把它的 data-slide 的值换成 next，这样它里面的这个按钮可以控制向后播放幻灯片 ..

里面的小图标是 carousel-control-next-icon ..

现在幻灯片项目的中间会显示两个小箭头图标 ..

让它们可以控制幻灯片的插放，我们还得在 carousel 的包装元素上添加一个 id .. 对应的值先设置成 carousel-demo

然后在这两个小图标上面，添加一个 href 属性，对应的值是 #carousel-demo ，链接的位置就是幻灯片包装元素 ..

再把这个属性也添加到下面这个小图标元素上 ..

再去预览一下 .. 按一下向右这个箭头图标 .. 可以向后播放幻灯片 ... 按一下向左这个小图标 .. 可以向前播放幻灯片项目 ..

导航指示

在旋转木马上面可以再添加一组导航指示 .. 把它们放在 carousel-inner 的上面 .. 一个有序列表 .. 上面加上 carousel-indicators .. 列表项目上面需要添加一个 data-target 属性，对应的值就是旋转木马元素的 id .. #carousel-demo .. 还得有个 data-slide-to 属性 .. 对应的值就是幻灯片项目的索引号 .. 这个索引号是从 0 开始的 ..

第二个导航指示，data-slide-to 的值应该就是 1 .. 第三个是 2

然后在当前项目的上面，还得再添加一个 active ..

预览

现在幻灯片上面会显示一组导航指示，会提示用户这组幻灯片一共有几个项目，当前显示的是哪个项目 .. 按一下这个导航指示里的某个项目，会显示对应的幻灯片项目 ....