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个链接说，link1，link2，link3，当您点击它时更改旋转木马中的幻灯片，除此之外我希望广告标题{{ 3}}在每个链接下面。看看我的示例图片 - 我尝试使用当前控件并试图修改它们但没有成功。

这是一个小提琴：http://jsfiddle.net/iamdanbarrett/CbtT9/

Answer 1

你可以尝试这样的事情......

http://bootply.com/113737

此示例使用data-target和data-slide-to导航到特定幻灯片。

Answer 2

如果你想实现像this这样的事情，那就是你要做的事情：

HTML code：

<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