Change dot color for carousel on mobile

[racheldbailey]

Builder content link

Builder.io: Drag and drop page builder and CMS

What are you trying to accomplish

• How do I change the dots under my carousel from black (current) to white? Under “Real People. Real Results.”
• I’m struggling to remove the excess space between the carousel images and the dots below. How do I shrink that?

[manish-sharma]

Hi @racheldbailey!

1. To change the carousel dots you can use the below code.

.slick-dots li button:before{
       background-color: #fff;
}
.slick-dots li.slick-active button:before{
       background-color: #000;
}

2. To remove space between carousel images and the dots add the below code and change the bottom value to -15px or so

.slick-dots{
    bottom: -25px;
}

[mrnda_darkroom]

@manish-sharma

.slick-dots li button:before

Hi! I’m tryin to change the size of the dots and when I use your code above,

slick-dots li button:before{ max-width: 8px; max-height: 8px; }
it’s returning a result where it looks like there are two dots for each button (see screenshot)

How can I change the size of the dots?

Additionally, I’d like them to sit on top of/within the image bounds (see below), when i create a negative margin, it adjusts the bottom of the image container.

[manish-sharma]

Hi @mrnda_darkroom,

Could you please page URL or builder content link?

[mrnda_darkroom]

@manish-sharma yes, see below:

Builder.io: Drag and drop Visual CMS

[manish-sharma]

@mrnda_darkroom

slick-dots li button:before{ max-width: 8px; max-height: 8px; }

Hi @mrnda_darkroom,

You can try using the below CSS code for resizing the carousel dots

.slick-dots li button:before{ 
    max-width: 8px; 
    max-height: 8px; 
    line-height: 8px !important;
}

And for positioning the dots within the image bounds instead of the negative margin, please try and use the CSS bottom property. e.g.

.slick-dots {
   bottom: 10px !important; // +ve value to push the dot up and -ve to push down
}

Let us know if you have any further questions or concerns. Thank you!

[mrnda_darkroom]

@manish-sharma

.slick-dots li button:before{ 
    max-width: 8px; 
    max-height: 8px; 
    line-height: 8px !important;
}

@manish-sharma Thanks! How do I adjust the space between the dots?