Как изменить стандартную стрелку 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

Вы можете использовать escape-последовательность 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>