How to set custom button in slick?

Question

JavaScript

How to set custom button in slick?

in js i write

$(document).ready(function(){
    $('.block-slick').slick({
        prevArrow: $('.prev'),
        nextArrow: $('.next')
    });
});

in html I created my own button with my own styles, but nothing works.

<div class=".prev">Левая кнопка</div>
<div class=".next">Правая кнопка</div>

I know that in js you can pass

prevArrow: '<div class="block__arrow--left"><</div>',
nextArrow: '<div class="block__arrow--right">></div>'

but in this case, the buttons appear before and after the slide, and I need to be able to position the buttons anywhere on the page.

Answer 1

Try like this:
js

$(document).ready(function(){
    $('.block-slick').slick({
        prevArrow: '.prev',
        nextArrow: '.next'
    });
});

html

<div class="prev">Левая кнопка</div>
<div class="next">Правая кнопка</div>