Bootstrap Carousel li item active class not working

Question

I took the code of the bootstrap 4 carousel and then split it into 2 cols, I did it because I need the carousel indicators to be somewhere else and not inside the carousel (as default).

The problem here is that the carousel is working well (at least the part of changing the image) it's just the "active" class that doesn't change to any other li item.

HTML

<div class="row mx-0">
        <div class="col-lg-3 col-md-3 col-sm-12 px-5">
            <h2 class="primary-color text-center text-uppercase" id="nombre-caso">Name Image</h2>
            <h3 id="descripcion-caso" class="primary-color text-center">Description Image</h3>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-12">
            <ol class="list-unstyled d-lg-block d-md-block d-flex" id="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active" style="margin-top:0;">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="1">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="2">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="3">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="4">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="5">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="6">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="7">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="8">
                    <i class="fas fa-circle"></i>
                </li>
                <li data-target="#myCarousel" data-slide-to="9">
                    <i class="fas fa-circle"></i>
                </li>
            </ol>
        </div>
        <div class="col-lg-8 col-md-8 col-sm-12 px-0">
            <div class="slide-wrapper">
                <div class="container" id="carousel-container">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_01_harley.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_02_freightliner.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_03_loarca.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_04_automotriz_bajio.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_05_almacenes.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_06_bodegas_industriales.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_07_residencial_queretaro.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_08_secundaria_ignacio_altamirano.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_09_oficinas_icsi.jpg)"></div>
                            </div>
                            <div class="carousel-item">
                                <div class="fill" style="background-image: url(img/casos-exito/cob_galeria_10_casa_zibata.jpg)"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.carousel-inner,.carousel,.carousel-item,.container#carousel-container,.fill {
    height:100%;
    min-height:700px;
    width:100%;
    background-position:center center;
    background-size:cover;
}
.slide-wrapper{display:inline;}
.slide-wrapper .container{padding:0;}

/*------------------------------ vertical bootstrap slider----------------------------*/
.carousel-inner> .carousel-item.carousel-item-next ,
.carousel-inner > .carousel-item.active.carousel-item-right{ 
    transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0);  top: 0;

}
.carousel-inner > .carousel-item.carousel-item-prev ,
.carousel-inner > .carousel-item.active.carousel-item-left{ 
    transform: translate3d(0,-100%, 0); -webkit-transform: translate3d(0,-100%, 0);  -moz-transform: translate3d(0,-100%, 0);-ms-transform: translate3d(0,-100%, 0); -o-transform: translate3d(0,-100%, 0); top: 0;

}
.carousel-inner > .carousel-item.next.carousel-item-left ,
.carousel-inner > .carousel-item.carousel-item-prev.carousel-item-right ,
.carousel-inner > .carousel-item.active{
    transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);; -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); top:0;

}
/*------------------------------- vertical carousel indicators ------------------------------*/
#carousel-indicators li{
    margin: 35px 0;
    color: gray;
}

#carousel-indicators li.active i{
    color: var(--primaryColor);
}

I just want to change the color of the active dot to show some good user experience on my page.

You will probably have to do this with javascript. You'll need to handle toggling the active class yourself. You can use the Bootstrap slide event to add your code to toggle the class — zgood

Akber Iqbal Akber Iqbal · Accepted Answer · 2019-07-24T06:29:00

This could be easily achieved with minimal css; the key for you will be to have both the sections ("section of indicators" & "section of images") inside the carousel div (this is the div which has the id='myCarousel'; This way you'll get the default functionality including the auto slide where you see the 'active' class being applied also.

working snippet below:

/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  height: 100%;
}

.carousel-indicators {
  display: block !important;
  height: 90% !important;
}

.carousel-indicators li {
  background-color: red !important;
  width: 10px !important;
  height: 10px !important;
  margin: 40% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class='container-fluid'>
  <h2>Demo Carousel</h2>
  <div id="demo" class="carousel slide" data-ride="carousel">
    <div class='row'>

      <div class='col-lg-1 col-md-1 col-sm-1 col-1'>
        <!-- Indicators -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
          <li data-target="#demo" data-slide-to="3"></li>
        </ul>
      </div>

      <div class='col-lg-11 col-md-11 col-sm-11 col-11'>
        <!-- The slideshow -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
          </div>
          <div class="carousel-item">
            <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
          </div>
          <div class="carousel-item">
            <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
          </div>
          <div class="carousel-item">
            <img src="https://www.akberiqbal.com/Jumbo.jpg" alt="Akber Iqbal" width="1100" height="500">
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

NOTE: I had to put !important against each property here on stack overflow code snippet because it loads the custom CSS before the bootstrap.css - in your actual code, place the <style>...</style> block after you load bootstrap.css and you wouldn't have to write !important;

Bootstrap Carousel li item active class not working

1 Answers