Twitter-Bootstrap-3 Carousel修改 [英] Twitter-Bootstrap-3 Carousel Modifications
本文介绍了Twitter-Bootstrap-3 Carousel修改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
那么，我有一个旋转木马完美的工作。现在我想能够稍微修改它，以便我的脚本：
< div id =myCarouselclass = carousel slide>
< div class =carousel-inner>
< div class =item activeid =1>
< center>图片到这里！< / center>
< / div>
< div class =itemid =2>
< center> Imsdfsdfsfsdfsdfsdfsfsdfsdf< / center>
< / div>
< div class =itemid =3>
< center> Imasdfsdfsdfsdfre！< / center>
< / div>
< / div>
< a class =carousel-control lefthref =javascript :; data-target =＃myCarouseldata-slide =prev>
< span class =icon-prev>< / span>
< / a>
< a class =carousel-control righthref =javascript :; data-target =＃myCarouseldata-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 =＃myCarouseldata-slide =prev> Dashobard< / a>< / li>
< li style =display：inline-block;>< a href =javascript :; data-target =＃myCarouseldata-slide =prev next>时间轴< / a>< / li>
< li style =display：inline-block;>< a href =javascript :; data-target =＃myCarouseldata-slide =prev> Visionboard< / a>< / li>
< / ul>
< / div>
< / div>
按照您的期望工作 - 现在我想有3个链接说，link1，link2， link3当你点击它改变幻灯片中的旋转木马，除了这个我寻找广告的标题这是你必须做的：
HTML代码：
< div id =myCarouselclass =carousel slide>
< div class =carousel-inner>
< div class =active itemid =id1>
< img src =http://placehold.it/300x200/888&text=Item 1/>
< / div>
< div class =itemid =id2>
< img src =http://placehold.it/300x200/aaa&text= Item 2/>
< / div>
< div class =itemid =id3>
< img src =http://placehold.it/300x200/444&text=Item 3/>
< / div>
< / div>
< a class =carousel-control lefthref =＃myCarouseldata-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃myCarouseldata-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'）>时间线< / 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）
循环转盘到特定的帧）。
更新1：
更新2：
So guys, I have a carousel which works perfectly. Now I want to be able to modify it slightly so heres my script:
<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>
Works as you would expect - now underneath I would like to have 3 links say, link1, link2, link3 that when you click it changes the slide in the carousel, in addition to this I am looking to ad a captionhttp://jsfiddle.net/iamdanbarrett/CbtT9/ underneath each of those links. see my example image - I have tried using the current controls and tried to modify them with no success.
Here is a fiddle: Fiddle
解决方案
If you want to achieve something like this this is what you have to do:
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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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 code:
function slideTo(valoare){
if (valoare == 0) $('#myCarousel').carousel(0)
if (valoare == 1) $('#myCarousel').carousel(1)
if (valoare == 2) $('#myCarousel').carousel(2)
}
And the CSS code i've used for this example:
#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;}
Here is the jsfiddle
This example uses .carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
Update 1:
Update 2:
这篇关于Twitter-Bootstrap-3 Carousel修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
