How to Change Customized Carousel Indicator Background Color

How to change customized carousel indicator background color?

Probably the easiest way to do this without Javascript is to modify your markup to use the standard classes. Then you can just use the active class that gets automatically appended to the immediate child elements of the element with the .carousel-indicators class.

DEMO without Javascript

In the demo, I override the standard Bootstrap CSS and take advantage of the active class that is appended to the .carousel-indicators child elements by the bootstrap.js via some custom css:

.carousel-indicators li {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #0000ff;
    box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);    
}
.carousel-indicators .active {
    width: 48px;
    height: 48px;
    margin: 10px;
    background-color: #ffff99;
}

If you can rework your content into the standard classes, you can always overwrite the css or customize it with LESS. You didn't post your custom css or indicate if you're using a version of Bootstrap 2 or 3 so, I couldn't provide more on point example. The markup in the demo is using version 3.2.0.

You can also do this with Javascript via the carousel events. Again, this example is based on Bootstrap 3.2.0. It will not work with version 2, as the event names changed.

DEMO using Javascript

In this example, you listen for the slid.bs.carousel event. This fires as soon as the carousel is about to slide, so to get the next active slide, you have to use the event.relatedTarget. Then to find the corresponding indicator, you can use the index of the next active slide to get the carousel indicator with the matching value in the data-slide-to attribute.

//Make sure to change the id to your carousel id
$('#carousel-example-generic').on('slid.bs.carousel', function (event) {
    var nextactiveslide = $(event.relatedTarget).index();
    var $btns = $('.carousel-buttons');
    var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']");
    $btns.find('.img-circle').removeClass('active');
    $active.find('.img-circle').addClass('active');
});

how to customize bootstrap carousel indicators ' - ' color

.carousel-indicators li
{
      background-color: #000 !important;
       /*more custom style*/
}

.carousel-indicators .active {
    background-color: grey !important;
}

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

How to change the carousel active indicator color - Bootstrap

The Bootstrap style the controls the carousel active dot is .carousel-indicators .active so:

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

customize the carousel indicators in Bootstrap 4

.carousel-indicators{
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 25px;
    padding: 8px;
    align-items: center;
}
.carousel-indicators li{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: black;
    opacity: 1;
    border: 0;
}
.carousel-indicators li.active {
    background-color: red;
}

Carousel indicators not showing up on white background on slides (custom style or class add)?

Overwrite the class .carousel-indicators li in another file, after the Bootstrap CSS bundle. Below I show some snippets for each version of Bootstrap up to the current version (v4).

Bootstrap 2.3.2

.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v2.3.2

---

Bootstrap 3.4.1 & 4.3.1

The same rule applies to both versions.

/* Add an extra .carousel parent class to increase specificity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li {
  background-color: #fff;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel .carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v3.4.1

CodePen for Bootstrap v4.3.1

How to change the background color for Bootstrap's carousel plugin?

The problem you have at the moment is that the carousel has the container class applied and is, therefore, adding a fixed width to the element. The white you're seeing either side is actually the background colour of the body.

There are two ways around this (I've shortened the code for the example):

Full width

<!-- Remove the container class from the slides div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->

        <!-- Left and right controls -->

    </div>
</div>

Image width (shows grey background)

<!-- Wrap carousel-inner in a container div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->
        <div class="container"> <!-- Added this line -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;">
                </div>
            </div>
        </div> <!-- Added this line -->

        <!-- Left and right controls -->

    </div>
</div>

I've forked your codepen for an example: https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0

How can I change Bootstrap carousel indicators into dots?

Yes, I think you need to write custom CSS for doing lines into dots.

You just need to override two properties (width and height) and add a new one, border-radius, to .carousel-indicators li.

Make width and height values equal eg: 10px each and give a border-radius of 100%.

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

---

Related Topics