先去单独设置一下向后翻阅幻灯片的按钮 … .slider-control .left{} …

把按钮设置为绝对定位 …. 因为在 .swipe 类里，设置了相对位置 .. 所以这个按钮会相对于幻灯片进行绝对定位 …

posa … position: absolute;

左边的位置设置为 20px …

l20 ……. left:20px;

顶部的位置设置可以使用百分比来设置 … 这里我们设置成 45%　… 大概是垂直居中于幻灯片 ….

t45p ….. top: 45%;

类似的方法，再设置一下向后翻阅幻灯片的按钮的样式 …

.slider-control .right{}

设置为绝对定位 … posa ….

右边的位置设置为 20px … r20

顶部的位置设置成 45% …. t45p

整体样式

下面再去设计一下这两个按钮的整体的样式 … .slider-control button{}

宽度设置成 50px … w50

高度也是 50px … h50

修改一下字号 … fz20 … 使用 20px

把指针设置成手形 … cur

添加一个黑色的背景 … bg#000

文字的颜色改成白色 … co … #fff;

添加一个 3 像素的白色的边框 … bd+ …. 3px …. #fff

再给按钮添加一个圆角效果 … 这里我们把圆角设置成 50% … 这样会得到一个圆形 …

bdrs …. command shift r

再让它有点透明度 … op0.7

下面我们可以让按钮在默认状态下隐藏起来 … 然后当鼠标放在幻灯片上面的时候，才会显示按钮 …

dis:n …

.swipe:hover button{}

ds …

最后，我们再给按钮本身去添加一个鼠标悬停的效果。

.slider-control button:hover{
opacity: 0.5;
}

这样鼠标放在按钮上面的时候，按钮会变得更透明一些 …

保存 …

下面去浏览器上试一下 ….

默认不会显示控制按钮 …

鼠标放在幻灯片上面的时候才会显示 ….

点击按钮 … 可以控制幻灯片的播放 …

.slider-control button{
width: 50px;
height: 50px;
font-size: 20px;
cursor: pointer;
background: #000;
color:#fff;
border: 3px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0.7;
}

.slider-control button:hover{
opacity:0.5;
}

.slider-control .left{
position: absolute;
left:20px;
top: 45%;
}

.slider-control .right{
position: absolute;
right: 20px;
top: 45%;
}