How to make such switches in slick?

Question

css

Please tell me how to do something like this in slick? Precisely positioning arrows to dots

spoiler

I tried it myself, but everything depends on the number of slides, you need the arrows to "stick" to the dots

Answer 1

You create a block for all this, for example .SlickNavBlock
Then write these options

// в них добавляешь что то типо того
appendDots: $(this).closest('.slider').find('.SlickNavBlock'),
appendArrows: $(this).closest('.slider').find('.SlickNavBlock'),

Then write these options

prevArrow: '<span class="slick-arrow_custom-left"></span>',
nextArrow: '<span class="slick-arrow_custom-rigth"></span>',
dotsClass: 'slick-custom-dots',

And that's it, it's up to CSS.