Customize arrows and dots inside a div so that we can position the main div of arrows and dots anywhere for Next.js 14.

[Irshadraza]

I want to customise the arrows and dots inside a div as below code

  for the design 

Kindly help me to slick slider code for the same.

[advanceddev]

u can create custom dots and arrows + use ref<Slider> for catch control

[xiemic]

also interested in this topic

@advanceddev how do you create custom dots?

for the arrows you can apparently use ref and then call slickPrev() and slickNext()

[codeaid]

Kind of in the same boat. Wanted to have custom dots hovering over the image - managed to do that but now I can't find a way to apply custom styles to the active dot. The appendDots property callback just gives you pregenerated li elements (which I wouldn't even want to use) and I can't detect which one is active and which one isn't.

EDIT: As it always goes, as soon as you post a question you find a solution to it yourself. Turns out the first appendDots function parameter is actually an array of ReactNode and not one node so the solution I came up with is converting it to a list of children and check for the active class name. Mind you, the dotsClass is mandatory if you want to style the outer container (any classes you add to the element wrapping the dots, in my case a div will be wiped.