问题描述
我有一个带有点设置而不是箭头的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 (将#修改为@)