customized arrows and x-overflow

[daviroquedev]

how can i customize the arrows?
and how can i adjust the total container size to avoid x-overflow

I believe the arrows are increasing the size of my container, even setting them hideArrow, my width is bursting

React.App.-.Google.Chrome.2022-12-10.18-49-28.mp4

[daviroquedev]

I am not able to leave the dots visible in the media queries, in the inspect element I can remove the display none, I would like it to be visible always.

how is it getting

changing display 'none'
https://user-images.githubusercontent.com/101668192/207507058-354cfaf3-750e-4485-9e10-546e1d87605a.mp4

how I want it and how is removing the display none

where to change in the code to remove this none display?