Javascript 如何使用CSS在slick slider JS中添加自定义箭头

如何将我自己的定制箭头添加到slick slider。我已经成功地覆盖了slick slider的默认按钮。但我自己的定制箭头似乎没有显示出来。如何解决此问题

$（文档）.ready（函数（）{
$（'.slider'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
自动播放：对，
自动播放速度：2000，
箭头：是的，
前箭头：“”，
下一行：“”
});
});
。下一步{
背景：url（'../img/right arrow.png'）不重复；
}
.滑头{
背景：url（'../img/left arrow.png'）不重复；
}

使用如下CSS，您可以根据自定义箭头图像更改图像的尺寸。
.slick-prev:before {
  content: url('your-left-arrow.png');
}
.slick-next:before {
  content: url('your-right-arrow.png');
}

.滑头下一个：：之前{
背景：url（'../img/right arrow.png'）不重复；
内容：“；
显示：块；
高度：15px；
宽度：15px；
}
.滑头{
背景：url（'../img/left arrow.png'）不重复；
内容：“；
显示：块；
高度：15px；
宽度：15px；
}
这对我很有用：

添加代码jsfiddle如果我使用上面的css并去掉js中的prevArrow:“”，nextArrow:“”，那么您的js不会将or添加到html中，而且我对js一无所知。默认按钮再次出现，而不是我的自定义箭头图标。不要从JS文件中删除“”下一行：“”此div。只需更改我上面提到的css部分，同样的问题是，当我使用上面的css代码时，什么也没有发生。
.slick-prev:before {
  content: url('your-left-arrow.png');
}
.slick-next:before {
  content: url('your-right-arrow.png');
}