如何使用数据属性更改Slick Slider默认箭头？

Question

如何使用数据属性更改默认箭头？

<div class="has-slick-slider" data-slick='{"slidesToShow": 1, "arrows": true, "prevArrow": "<button type="button" class="slick-prev">Prev</button>"}'>

slidesToShow，arrows和其他属性可以正常工作。但是当我尝试更改箭头内容时，它不起作用。

谢谢

Answer 1

您可以为自定义按钮添加html，并将该元素的选择器包括为prevArrow值，如下所示：

<div class="has-slick-slider" data-slick='{"slidesToShow": 1, "arrows": true, "prevArrow": "#custom-prev-arrow"}'>
    ...
</div>
<button id="custom-prev-arrow">...</button>

希望有帮助。

Answer 2

您可以使用JS转义序列：\u0022：

<div class="has-slick-slider" data-slick='{"slidesToShow": 1, "arrows": true, "prevArrow": "<button type=\u0022button\u0022 class=\u0022slick-prev\u0022>Prev</button>"}'>
</div>
<button id="custom-prev-arrow">...</button>