[英]Twitter bootstrap carousel slideshow with js code
我想在站點上制作一堆js / css動畫的幻燈片。 我正在使用引導程序作為其框架。 旋轉木馬聽起來像幻燈片放映中的內置功能,但似乎是用於圖像的。 我的是js動畫,我發現很難處理它。 有沒有更好的方法基於引導框架呢?
這是Bootstrap中的Carousel:
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
我正在嘗試做的卻把事情搞砸了:
您可以在$('.carousel').carousel();
使用活動滑塊$('.carousel').carousel();
在每張幻燈片上,您都可以將js / css效果與
$('.carousel').on('slide.bs.carousel', function () {
// js function etc.
});
例如http://jsbin.com/kekocuha/1 ,我為每個幻燈片的文本動畫使用了animate css,您也可以使用圖像js等。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.