Twitter-Bootstrap-3旋轉木馬修改

Question

所以，夥計們，我有一個完美的傳送帶。現在，我希望能夠修改它稍微因此，繼承人我的腳本：

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active" id="1"> 
      <center>Images go here!</center> 
     </div> 
     <div class="item" id="2"> 
      <center>Imsdfsdfsfsdfsdfsdfsfsdfsdf</center> 
     </div> 
     <div class="item" id="3"> 
      <center>Imasdfsdfsdfsdfre!</center> 
     </div>  
    </div> 

    <a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev"> 
     <span class="icon-prev"></span> 
    </a> 
    <a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next"> 
     <span class="icon-next"></span> 
    </a> 

    <br /><br /> 
    <div class="container"> 
     <ul style="float:left; margin-top: 200px; display:inline-block;"> 
      <li style="display:inline-block;"><a href="javascript:;" data-target="#myCarousel" data-slide="prev">Dashobard</a></li> 
      <li style="display:inline-block;"><a href="javascript:;" data-target="#myCarousel" data-slide="prev next">Timeline</a></li> 
      <li style="display:inline-block;"><a href="javascript:;" data-target="#myCarousel" data-slide="prev">Visionboard</a></li>          
     </ul> 
    </div> 
</div>  

作品如你所期望的 - 現在下面我想有3個環節說，鏈接1，鏈接2，LINK3，當你點擊它的變化轉盤上的幻燈片，除此之外，我正在尋找在每個鏈接下面添加標題http://jsfiddle.net/iamdanbarrett/CbtT9/。看到我的示例圖像 - 我試圖使用當前的控件，並試圖修改它們沒有成功。

這裏是一個小提琴：Fiddle

Answer 1

如果你想實現像this這是你必須做的事情：

HTML代碼：

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="active item" id="id1"> 
      <img src="http://placehold.it/300x200/888&text=Item 1" /> 
     </div> 
     <div class="item" id="id2"> 
      <img src="http://placehold.it/300x200/aaa&text=Item 2" /> 
     </div> 
     <div class="item" id="id3"> 
      <img src="http://placehold.it/300x200/444&text=Item 3" /> 
     </div>  
    </div> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

<div class="container"> 
    <ul> 
     <li style="display:inline-block;"><a href="javascript:slideTo('0')">Dashobard</a></li> 
     <li style="display:inline-block;"><a href="javascript: slideTo('1')">Timeline</a></li> 
     <li style="display:inline-block;"><a href="javascript: slideTo('2')">Visionboard</a></li>          
    </ul> 
</div> 

JavaScript代碼：

function slideTo(valoare){ 
    if (valoare == 0) $('#myCarousel').carousel(0) 
    if (valoare == 1) $('#myCarousel').carousel(1) 
    if (valoare == 2) $('#myCarousel').carousel(2)  
} 

而且CSS代碼我」已用於此示例：

#myCarousel { 
    margin-top: 40px; 
} 

.carousel-linked-nav, 
.item img { 
    display: block; 
    margin: 0 auto; 
} 

.carousel-linked-nav { 
    width: 120px; 
    margin-bottom: 20px; 
} 

.container { 
    text-align: center; 
} 

ul {margin: 0;} 

這裏是jsfiddle

此示例使用.carousel(number)

循環轉盤到（基於0，類似的陣列）的特定幀。

更新1：

• 結果here
• 代碼here

更新2：

• 結果here
• 代碼here

Answer 2

你可以嘗試這樣的事情..

http://bootply.com/113737

此示例使用data-target和data-slide-to瀏覽到特定的幻燈片。