光滑的轮播 - 更改默认点

编程问答 2022-05-14

问题描述

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

enter image description here

看起来像这样：

enter image description here

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

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

也许有一种方法可以使用此选择器更改形状？

解决问题的最佳方法是什么？我很感激任何帮助。

解决方法

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

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