How can I remove slideshow dots and reposition arrows in Brooklyn Theme?

[neodstoreof]

Hello,

My store: neodstore.com.br

I’m having an issue with the dots positioned on the bottom of the slideshows, the ones you click to move around the slides. I already made it transparent, but it’s still there. I would like it to make it gone. I saw some code to past at the end of the theme.scss get rid of the pause button:

button.hero__pause, .hero .slick-next .slick-dots {
display: none !important;
}

However, I do not know hot to use this to get rid of those little dots. Here they are

This image is when I load the page and it shows, but when the page is loaded, it’s transparent, because I made it transparent on slideshow.liquid. Can I get rid of it?

Also, I wanted to make those arrows bigger and on the middle of the slideshow, like this:

It doesn’t need to change the style of what already is… maybe adding thickness or making it larger would be fine and changing position to the middle.

Thank you!

[dmwwebartisan]

@neodstoreof

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#Hero-slideshow .slick-dots li {
    display: none;
}
#HeroWrapper-slideshow .hero__controls.wrapper {
    max-width: 100%;
    top: 50%;
}

Thanks!

[oscprofessional]

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.css

#Hero-slideshow .slick-dots li {
    display: none;
}
#HeroWrapper-slideshow .hero__controls.wrapper {
    max-width: 100%;
    top: 50%;
}

[neodstoreof]

This worked perfectly!! Awesome! Thank you so much!

Do you know how to change the arrow design similar to the one in the picture?

[carmelesmbm]

DO you know how to put the dots inside and make them trabsparent like , in the product page?

like that