用一个实心儿的圆点，表示当前正在播放的幻灯片 ... 点击表示幻灯片的圆点，可以切换到对应的幻灯片 ... 下面在我们的幻灯片里添加这些小圆点。

可以把它们放在幻灯片项目的上面。

先用一组有序的列表标签 ... 在这个标签上，添加一个 carousel-indicators ...

每个小圆点都是一个列表项目，所以要放在一个 li 标签里面 ... 在这个标签上，要再添加点属性 ... 先添加一个 data-target 的属性 ... 它的值就是在幻灯片上面定义的 id ... 在我们这里就是 slideshow 这个 id ...

然后要再加上一个 data-slide-to ... 它表示的点击当前这个小圆点所播放的幻灯片是哪一个 ... 幻灯片项目可以从 0 开始 ... 也就是，如果 data-slide-to 的值是 0 的话，点击它的时候，就会播放幻灯片里面的第一个项目 ...

li[data-target="#slideshow" data-slide-to="$@0"]*2

这里我用的是 emmet 插件提供的撰写 html 代码的方法 ... li 表示 html 的标签 ... 方括号里的东西是在这个标签上面的属性 ... 这里这个 $@0 ，表示一个从零开始的数字 ... 后面的 *2 表示，我们需要两个这样的标签 ...

然后我们要在表示当前幻灯片的小圆点上面，添加一个 active 类 ... 在播放其它幻灯片的时候，会把这个 active 从这个小圆点的元素上去掉，然后添加到其它的小圆角的元素上 ...

保存 ... 回到浏览器 ...

在幻灯片的下面，你会看到两个圆点 ... 分别表示对应的幻灯片项目 ... 播放哪个幻灯片的时候，这个小圆角会变成实心儿的 ...

点击这个小图点 ... 可以切换到对应的幻灯片项目上 ...