Carousel Indicators Colour

Hi,

I have spend quite some time googling on how to change the active carousel indicator colour. By default it almost white and the active one is light gray. I have tried adding a custom CSS with the following:

.carousel-indicators .li{
    background-color: #f00;
}

but, this doesn’t seem to work and is struck out. My page is white in background and hence unable to see the indicators. From the left pane, i select the “Indicators” after dragging carousel and change the “font colour”, but that doesn’t seen to anything. Can someone please help?

I found a way to change from white to gray. That’s some progress. However, it change only from light theme to the dark theme colours. I still cannot set my own colours to the indicators.

Select “Indicators”, in the “Appearance” section on the right, scroll down to the filters and then slide “Invert” all the way to the right and the indicator colours become visible in a white background.

Hiya Srimanth,

In order to help you better please tell us which carousel you’re trying to use, which version of BSS you’re using, which platform (windows/mac/linus) and version, and give a link to the uploaded site so we can see the code.

I don’t have a public site yet. It’s on my local machine on a windows VM. I am using BSS version 5.3.3.

Just click on “New” design with a blank canvas on BSS and drop the “Carousel” into your code. The left and right controls are by default white. The indicators are also white.

When i drag the “Invert” from the “Filters” section in the “Appearance” pane, the controls and indicators go dard (dark theme). However, they are only from light to dark. However, i want the indicators color (at the bottom of the carousel images / text) to be red or some other colour.

try with this

.carousel .carousel-indicators li {background-color: red;}
.carousel .carousel-indicators li.active {background-color: blue;}

Thank you so much. I created a new css file and works perfect. I guess, i missed the “.carousel” before the indicators. Initially, I was trying to figure out so many options via the UI.

I have now changed it to the following:

.carousel .carousel-indicators li {  background-color: gray; }
.carousel .carousel-indicators li.active { background-color: var(--primary); }

Against a white background, this now works a charm! BSS community and forums are great and the users make it simple superb. I have started enjoying BSS now.

1 Like

Well done @srimanth
Now you can change the color of the next and prev arrows yourself and show us how you did it

Just to mention, there is a new class added in Boootstrap 5 to the .carousel called .carousel-dark which will invert the colors for the default white fill.

1 Like

Changing the “Prev” and “Next” is a little more tricky as they are SVG images. However, its simpler to use “Font Awesome” icons via BSS.

  • Search for “Icon” on top left
  • Drag it under the first Span under “Previous” and “Next”
  • Double click on the icon and search for “chevron” and select the “right” and “left” accordingly.
  • Change colours of the chevrons from UI or any styling

In addition, you’ll have to remove the existing svg for the controls with the following CSS:

.carousel .carousel-control-next-icon, .carousel-control-prev-icon { background-image: none; }

You might also want to update BSS to 5.5.4 as well, some nice new features came with that as well as the updated BS 5 beta being added as well.

@srimanth
or you can make your own arrows in a shape and color that you like and get a unique look on your slider. add this to your custom css

.carousel-control-next-icon {background-image: url(your-next-icon.png);}
.carousel-control-prev-icon {background-image: url(your-prev-icon.png);}

I’ve been finding more and more I prefer to use SVGs for images whenever possible. PNGs can get muddy when shrunken down, or pixelated when enlarged on very large displays, or shown on very hi-resolution screens.

SVGs (when created properly) are usually close in terms of file size, and they look a lot better when the image is responsive, and has to shrink very small, or grow very large, especially if it has small text, outlined letters, thin strokes, etc… I’ve slowly been replacing a lot the PNGs on my websites with SVGs.

Here’s one site where I just recently redid the client’s logo and all the info graphics as SVGs.

https://protectinteriorservices.com/