使用 jquery 插件 slick carousel 自定义箭头和点

Question

如何自定义 slick carousel jquery 插件中的下一个和上一个箭头？我尝试修改 slick.css 文件，但结果很奇怪。

我想为箭头和点添加自定义图像以及修改滑块和箭头之间的边距。

Answer 1

检查元素，你会看到按钮：

class="slick-prev slick-arrow"

该类还有一个带有图像的伪元素（检查内容：“←”;。要覆盖您可以在自己的 css 中执行。

.slick-prev{
  width:20px;
  height:20px;
  background:url(/url/to/your/image.png);
}

.slick-prev:before{
  content:none;

}

这样您就可以删除当前箭头并在按钮内放置背景图像。或者你也可以在伪标签上放一个背景图片。