前面，我们直接在幻灯片里面添加可以控制幻灯片播放的元素，在这些元素上面，使用特定的代码结构，添加需要的 data 属性，它们就可以去控制幻灯片的播放了。这是通过 Bootstrap 的 data api 实现的功能。

另外，我们也可以通过 JavaScript 的代码，手工去设置控制幻灯片播放的元素。可以播放上一张或者下一张幻灯片，可以播放或者暂停幻灯片。下面一起来看一下怎么样去实现。

先去掉在旋转木马容器上面的 data-ride="carousel"，这样它就不会自动播放了。

然后在幻灯片里面，去添加几个按钮元素 ... 可以先添加一个包装的容器 ... 在上面加上一个 .text-center，这样可以让这样按钮居中显示 ...

div.text-center ...

我们可以使用一个按钮组 ... 这是 Bootstrap 提供的一个小组件 ...

先用一组 div 标签 ... 上面加上一个 .btn-group 类 ... 它里面，是按钮组里面的按钮 ... 可以使用 button 标签 ... 在上面，加上一个 btn ，还有 btn-default ... 使用默认样式的按钮 ...

我们需要三个这样的按钮 ...

按钮上面显示的东西可以是一些小图标 ... 在 Bootstrap 里面，使用小图标可以先用一组 span 标签 ... 上面，要加上一个 glyphicon ... 然后还要加上表示具体的小图标的类 ... 这些类都是用 glyphicon 开头的 ...

div.btn-group>button.btn.btn-default*3>span.glyphicon.glyphicon-

在第一个按钮上的小图标是 backward ... 一会用它来控制向左播放幻灯片 ... 中间是一个播放或者暂停的按钮 ... 这里可以先添加一个播放的按钮... 等会儿我们要切换一下这个按钮上的小图标 ...

最右边的小图标，可以使用 forward ... 它可以去控制向右播放幻灯片 ... 也就是播放下一张幻灯片 ...

我们可以在这个按钮组的包装元素上面，添加一个边距 ... p20

然后，再去给这几个按钮起个名字 ... 可以在这些要按钮上面定义 id 或者 css 类 ... 这里我们直接去添加 css 类 ... 向左的这个按钮 ... 添加一个 prev-slide ...

中间的这个按钮 ，加上一个 play-and-stop ...

最后这个按钮 ... 添加一个 next-slide ...

等会儿，我们要用到这些名字，去定位这些按钮，给它们去添加相应的功能。 在下面的视频里，我们再一起来看一下 ...