Html 引导转盘活动类未更改_Html_Css_Bootstrap Carousel

Html 引导转盘活动类未更改

html css

Html 引导转盘活动类未更改,html,css,bootstrap-carousel,Html,Css,Bootstrap Carousel,我已经创建了一个引导旋转木马，点击指示器可以更改当前幻灯片，但不会将幻灯片的类别更改为活动，这意味着指示器永远不会更改 <body> <div class="container"> <div class="row"> <div class="#"> <div id="my-slider" class="carousel slide container" data-

我已经创建了一个引导旋转木马，点击指示器可以更改当前幻灯片，但不会将幻灯片的类别更改为活动，这意味着指示器永远不会更改

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

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

使用class=“#”删除div

不要忘记在bootstrap.js文件之前包含jQuery

这是我用你的密码做的笔。

笔示例

您可以检查以下给定的引导转盘链接：

您能提供一个工作的JSFIDLE或codepen演示吗？先生，您能告诉我，您使用的是什么版本的引导或JQuery文件吗？它在fiddle上工作正常。好吧，它在小提琴上没有任何变化：，

*{
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;

}