6
我想让旋转木马滚动的图片。另外,当我们点击它们时,他们打开超链接。如何在Twitter Bootstrap Carousel中添加图片链接?
我想让旋转木马滚动的图片。另外,当我们点击它们时,他们打开超链接。如何在Twitter Bootstrap Carousel中添加图片链接?
简单来说,信封图像与href
标签。所以,如果我们修改official documentation的例子:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="http://estiloasertivo.blogspot.com.es/">
<img src="http://lh5.ggpht.com/-tNlXRzR4qMw/ThaowBgad2I/AAAAAAAAD6I/OEd6kbouBvk/s1600-h/chapi%25255B4%25255D.png" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
<div class="item">
<a href="http://www.youtube.com/watch?v=Ehv0iriLTKE">
<img src="http://www.chistosos.com.mx/wp-content/uploads/2012/07/perro-gracioso-en-coche-aire-chistosa.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
<div class="item">
<a href="http://www.google.cn/">
<img src="http://www.theandrewblog.net/wp-content/uploads/2012/04/ant.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
你有一个小提琴或你所使用的传送带用演示页?如果我们能够看到一些代码而不是在这里盲目工作,它会有所帮助。 –