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

Posted 2023-05-09

【中文标题】如何使用数据属性更改 Slick Slider 默认箭头？

【英文标题】：How to change Slick Slider default arrow using data attributes?

【发布时间】：2019-05-13 04:30:48

【问题描述】：

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

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

slidesToShow、arrows 和其他属性运行顺利。但是当我尝试更改箭头内容时它不起作用。

谢谢

【参考方案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>

希望对你有帮助。

【讨论】：

#谢谢，成功了。

您好，Irina，当我在一页的不同滑块中使用相同的 id 或类名时，它不起作用。有什么解决办法吗？

@RajuAhammad，嗨。请避免在一页使用相同的 ID。如果您为两个滑块使用一个元素（我的意思是按钮），它将允许此按钮同时更改两个滑块的幻灯片。您可以根据需要创建更多按钮，为它们提供相同的样式类（如果它们看起来彼此相似）和不同的 ID。通过这种方式，您可以轻松地将这些 ID 用作滑块的配置。这是jsfiddle

【参考方案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>