默认在这个旋转木马上会显示左右两个控制按钮，不过因为我们的设计，把按钮盖住了 .. 让它们显示出来得去覆写几行样式 ..

先检查一下这块儿元素 .. 在这个 carousel 元素上，应用了 slick 方法，它会用 JavaScript 改造一下这块代码 .. 会添加一些东西 ..

比如这里有个 button 元素 .. 它就是一个控制浏览的按钮 . 上面会有一个 slick-prev 类 ..

在 Styles 面板上，可以观察一下应用在这个元素上的样式 .. 这里有个 left 属性，它的值是一个负 25px，可以改成正的 24px

然后在下面这块儿样式里面，再添加一个 z-index 属性，值设置的大一些 .. 这样这个按钮就会显示出来了 ..

在我们的设计里，控制按钮会在底部显示 .. 这些按钮元素上都用了绝对定位， top:50% ，会让它们垂直居中 ..

这个 top 的值可以改成 auto .. 再用一下 bottom ，设置一下底部的位置 .. 先设置成 0 .. 这样这个按钮就会显示在底部 ..

想要保留这些样式，可以在项目里面单独创建一个样式文件 .. 放在 app .. styles 的下面 .. 名字可以是 _carousel.scss ..

打开 main.scss ... 用一个 @import，导入 carousel 这个样式文件 ..

在回到这个样式文件 ... 写一个样式选择器 .. 先用一个 .ui.hero.carousel .. 里面可以再嵌套一些样式..

按钮上有个 css 类，.slick-prev .. 把它的 left 属性的值设置成 24px ..

还有一个控制按钮 .. 上面有个 .slick-next 类 ... 把它的 right 属性的值设置成 24px .. 默认它的 right 属性的值是 -25px ..

同时再设置一下这两个按钮的样式 .. .slick-prev, slick-next .. 先设置一下这两个元素的 z-index ... 值可以是 3 ...

如果你发现按钮还没显示出来，你要以把这个值再设置的大一些 ..

然后把它的 top 属性的值设置成 auto ... 默认是 50%，我们想让这两个按钮在底部显示，所以先覆盖一下它的 top 的值 ..

再用一个 bottom ，设置一下它的底部位置，设置成 0 ...

现在，你可以看到两个控制按钮 .. 它们可以控制旋转木马的显示 ...

这里我们做的只是在自己的样式表里，添加了几行自定义的样式，去覆盖了 slick 自带的样式表里的几个样式 ..

让这个控制按钮符合我们的设计 ... 这些自定义的样式，都嵌套在了 .ui.hero.carousel 里面，所以，这些样式只会影响页面上的这种特定元素里的旋转木马的显示 ...