用户登录

中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

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

先检查一下这块儿元素 .. 在这个 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 里面,所以,这些样式只会影响页面上的这种特定元素里的旋转木马的显示 ...

自定义旋转木马的控制按钮《 网页设计案例:旋转木马 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点