如何使用数据属性更改 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>

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

How to change Slick Slider default arrow using data attributes?

html

jquery

jquery-plugins

slick.js