Bootstrap Carousel active class not changing

Question

I have created a Bootstrap carousel and clicking the indicators changes the current slide but doesn't change the class of the the slide to active meaning the indicator never changes.

<body>
    <div class="container">
        <div class="row">
            <div class="#">
                <div id="my-slider" class="carousel slide container" data-ride="carousel">

                    <!--indicators dot nav-->
                    <ol class="carousel-indicators">
                        <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                        <li data-target="#my-slider" data-slide-to="1"></li>
                        <li data-target="#my-slider" data-slide-to="2"></li>
                    </ol>
                    <!--wrapper for slides-->
                    <div class="carousel-inner" role="listbox">
                        <div class="item one active">
                            <img src="images/IMG_6737.png" alt="The Shard" />
                        </div>

                        <div class="item two">
                            <img src="images/IMG_6630.png" alt="A London Barbers" />
                        </div>

                        <div class="item three">
                            <img src="images/IMG_6659.png" alt="A London Bar"/>
                        </div>      
                    </div>               
                </div>    
            </div>    
        </div>  
    </div> 
 </body>

And the CSS:

*{
margin: 0;
padding: 0;
}
.carousel {z-index: -99;}
.carousel .item{
    position: fixed;
    width: 100%; height: 100%;
}
.carousel .one {
    background: url(images/IMG_6737.png);
    background-size: cover;    
    background-repeat: no-repeat;
}
.carousel .two {
    background: url(images/IMG_6630.png);
    background-size: cover;  
    background-repeat: no-repeat;
}
.carousel .three {
    background: url(images/IMG_6630.png);
    background-size: cover;  
    background-repeat: no-repeat;
}
.carousel .active .left{
    left:0;
    opacity: 1;
}

.carousel-indicators {
    position: fixed;
    top:0;
    float: left;
    padding-bottom: 50px;
    z-index: 30;
    margin-top: 40px;
}

.carousel-indicators li{
    width: 30px;
    height: 30px;
    border-radius: 1;
    margin: 0 10px;
    border-radius: 100%;
}
.carousel-indicators .active{
    width: 30px;
    height: 30px;
    margin: 0 10px;

}

The active indicator should be the only indicator that is filled and the rest should be hollow this does not happen because the list items class of active doesn't changed after being clicked on.

Can you provide a working jsfiddle or codepen demo? I can help you if you can do that. — vikrantnegi
sir, Would you please tell me, What version of bootstrap or JQuery file you using? — Abdullah Al Ahsan

stojkosd stojkosd · Accepted Answer · 2017-04-04T12:52:24

Remove div with class="#"

Don't forget to include jQuery before bootstrap.js file.

This is pen I made with your code. pen examplehttp://codepen.io/stojko/pen/NpJOEZ

Bootstrap Carousel active class not changing

2 Answers