Arrows on the sides of dots in a slick slider?

Question

css

How can I make the arrows in the slick slider be on the sides of the dots?
Made styles, but there are several sliders on the page, in which there are a different number of slides. Accordingly, it is not an option to prescribe separate styles for each slider.

Answer 1

Well, the easiest way is to just add these buttons after the slider is initialized:

$('.slick-dots').prepend('<li><a class="prev-btn" href="#">Prev</a></li>');
$('.slick-dots').append('<li><a class="next-btn" href="#">Next</a></li>');