slick 提供了很多配置选项，使用这些选项你可以定制旋转木马的显示 .. 打开自定义的脚本文件 ... 这里我们在 ui hero carousel 上面应用了 slick 方法 .. 把它变成了一个旋转木马 ..

在这个 slick 方法里，可以给它一个对象 .. 在这个对象里你可以使用 slick 提供的配置选项去配置一下旋转木马的显示 ..

比如默认会在旋转木马上面显示一对控制按钮，如果你不想使用它们，可以设置一下 arrows 选项，它的值默认是 true，这里我们把它设置成 false ..

这样就不会再显示这个控制按钮了 .. 再注释掉这个配置 ..

现在我想自己定制一下这两个按钮的样式 .. 先添加一个 prevArrow 选项 .. 它的值就是自定义的后退按钮元素 . 可以用一个 button 元素 .. 加上 ui prev button 这几个 css 类 .. 一会我们会去定制它的样式 ..

按钮里包装的东西可以用一个 material design 里提供的小图标 .. 图标的名字是 chevron_left ..

逗号分隔一下 .. 再添加一个 nextArrow ，它设置的是自定义的前进控制按钮元素 .. 一个 button 元素 .. 上面加上 ui next button 这几个 css 类 .. 里面是一个小图标 ... 图标的名字是 chevron_right ..

你会看到这两个按钮的样式跟之前会有些变化 .. 因为我们自己定制了按钮元素 ..

再打开之前创建的 carousel 样式 .. 之前这些覆盖的样式现在可以去掉了 ..

然后我们去定制一下自己的控制按钮元素的样式 .. 先添加一个 .prev.button, .next.button .. 设置一下这两个自定义按钮元素的样式 ..

用一个 position 属性，设置成 absolute .. 让它们都绝对定位 ..

z-index 的值设置成 3 .. bottom 设置成 0

上面再添加一个 .prev.button ，把它的 left 的值设置成 24，让后退按钮距离左边儿留出 24 个像素 ..

再添加一个 .next.button .. 把它的 right 的值设置成 24px .. 让右边这个按钮，距离右边儿留出 24 个像素 ..

再去设置一下这两个按钮的样式 .. padding 设置成 0 .. 底边儿留出 24px .. margin-bottom

width 设置一下它的宽度 .. 32px .. height 设置一下它的高度，也是 32px

border-radius可以设置圆角 .. 值可以是 50% .. 这样如果元素的高和宽一样，应用了这个 50% 的圆角就会让元素变成一个圆形 ..

text-align 设置成 center ，文字的对齐方式让它居中对齐 ..

再用一个 background 设置一下按钮的背景，是一种半透明的白色 .. 这种颜色的值可以使用 rgba 的形式表示 .. 前三位是颜色的 rgb 的值， 最后一位是不透明度 ..

background: rgba(255, 255, 255, 0.4);

再用一个 color 属性，设置一下元素里面的文字的颜色 ... 这个颜色的值也可以使用 rgba 的形式表示 .. 文字是半透明的黑色 ...

color: rgba(0, 0, 0, 0.4);

现在你看到的就是我想要的控制按钮的样式 ...