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

回答

相關問題