光滑的轮播 - 更改默认点

Question

我使用这个插件来创建一个轮播：https://kenwheeler.github.io/slick/ 默认情况下，有圆点来控制轮播的流动。但是，我想将点更改为正方形并保持“主动”效果。所以我想要这个：

看起来像这样：

我已经尝试过在初始化轮播时添加此代码：

 customPaging : function(slider, i) {
 return "<div class='square'></div>";
},

并添加这个 css：

.square {
  height: 10px;
  width: 10px;
  background-color: #ffe499;
}

.square:active {

  background-color: #ffc425;
}

但是主动效果并没有像预期的那样起作用。它仅在单击时起作用，然后消失。

我也可以像这样改变它们的大小（与上面的代码无关）：

.slick-dots li button:before {
  font-size: 10px;
  line-height: 10px;
  color: #FFC425 !important;
}

也许有办法使用这个选择器改变形状？

解决问题的最佳方法是什么？如有任何帮助，我将不胜感激。

Answer 1

我解决了这个问题。这段简短的 css 代码就足够了：

.slick-dots li button:before {
background-color: #FFC425;
height: 10px;
width: 10px;
text-indent: -9999px;
overflow:hidden; 
}