如何解决如何将slick.js活动点设置为图像而不是颜色
我目前正在使用3个点。
我要实现的目标是:
活动点将带有徽标而不是颜色。从我的图像中可以看到,将徽标作为CSS中的“内容”标签插入后,它的尺寸完全错误且未对齐。这个特定的示例应该是第一个点并处于活动状态。
.slick-dots
{
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 50px;
height: 50px;
margin: 0 5px;
padding: 0;
line-height: 50px;
cursor: pointer;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 20px;
line-height: 40px;
position: absolute;
top: 0;
left: 0;
width: rem(50);
height: rem(50);
content: '•';
text-align: center;
opacity: 1;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: 1;
content: url(../../assets/img/logolq.png);
height: rem(20);
width: rem(20);
bottom: 30px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。