Bootstrap Carousel active class not changing

我已经创建了一个Bootstrap传送带，并且单击指示灯会更改当前的幻灯片，但不会将幻灯片的类更改为活动状态，这意味着该指示符永远不会更改。Bootstrap Carousel active class not changing

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

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

}

的活动指示灯应该是充满的唯一指标，并因为列表项类的活性不改变剩下的应该是中空的，这不会发生被点击后。

来源

2017-04-04 Desinneh

你能提供一个工作的jsfiddle或codepen演示？如果你能做到的话，我可以帮助你。 – vikrantnegi007

先生，请您告诉我，您使用的是什么版本的bootstrap或JQuery文件？ –

它在小提琴上工作很好。 [这里]（https://jsfiddle.net/DTcHh/31474/） – MUT

带class = “＃” 删除DIV

不要忘记之前bootstrap.js文件，包括jQuery的。

这是我用你的代码制作的钢笔。 pen examplehttp://codepen.io/stojko/pen/NpJOEZ

来源

2017-04-04 12:52:24 stojkosd

那么它的工作没有任何改变小提琴：P，[这里]（https://jsfiddle.net/DTcHh/31474/） – MUT

您可以检查下面给出的链接，引导旋转木马：

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

来源

2017-04-04 13:11:25

Bootstrap Carousel active class not changing

回答

相关问题