[英]Bootstrap3 Carousel Caption from thumbnail
我想在鼠標光標位於轉盤下方的縮略圖上時,通過圖像更改來進行Bootstrap 3轉盤。 現在我有了類似的東西,下面有輪播和縮略圖,通常情況下,引導程序中圖像會隨着時間而變化,如果可能隨時間而改變,並且當您將鼠標指向輪播下的縮略圖時,我希望這樣做也。
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" >
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" >
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500"
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="container thumbs">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="display: inline;" alt=""> </a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style=" display: inline;" alt="">
</a>
</div>
</div>
</div>
並啟動: http ://bootply.com/104037
謝謝您的幫助,最好的問候。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.