光滑的輪播 - 更改默認點

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; 
}