引导旋转木马活动类不变。

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.

我创建了一个Bootstrap旋转木马，点击指示器会改变当前的幻灯片，但不会改变幻灯片的类别，这意味着指示器不会改变。

<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:

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.

活动指示器应该是唯一被填充的指示器，其余的应该是空的，这不会发生，因为激活的列表项在被点击后不会改变。

2 个解决方案

#1

You can check below given link for Bootstrap carousel:

您可以在以下链接中查看Bootstrap旋转木马的链接:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h

#2

Remove div with class="#"

删除与类div = " # "

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

不要忘记在引导之前包括jQuery。js文件。

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

这是我用你的代码写的笔。笔examplehttp:/ / codepen.io /业/钢笔/ NpJOEZ

#1