下面我们去给幻灯片添加两个控制按钮 … 用户点击这些按钮，可以向前或者向后翻阅幻灯片的内容 … 先去准备一下需要的 HTML …

先添加一组 <div> 标签 … 可以把它放在幻灯片容器的里面 …

上面加上一个叫 slider-control 的类 … 一会儿我们需要用它来给控制按钮添加样式 …

div.clider-control

在它的里面，再添加一个向前翻阅幻灯片的按钮 … 可以使用 <button> 标签 … 上面添加一个叫 left 类 … 再加上一个 onlick 的属性 … 属性的值是 mySwipe.prev() … 这样这个按钮就可以向前翻阅幻灯片了 …

在 <button> 标签里 … 可以加上一个 font-awsome 的小图标 … 这里我们可以使用 icon-angle-left 这个小图标 … 是一个向左的箭头 …

button.left.[onlick="mySwipe.prev()"]>i.icon-angle-left

下面我们再去添加向后翻阅幻灯片的按钮 … button 标签 … 添加一个 .right 类 … 加上 onclick 属性 … 值是 mySwipe.next() … 然后是一个小图标 … 使用 icon-angle-right … 一个向右的小箭头...

button.left.[onlick="mySwipe.next()"]>i.icon-angle-right

预览

打开浏览器 …

在幻灯片的下面，会显示两个按钮 … 点击向右的箭头可以向后翻阅幻灯片 ….

点击向左的箭头，可以向前翻阅幻灯片 …

下面视频我们可以去给这些按钮添加点样式 … 让它们更好看，更易用