bxsliderのフェードを利用してぼやけた画像をアニメーションで表示

  • このエントリーをはてなブックマークに追加

bxsliderのフェードを利用してアニメーションのスライダーをspeedが500、pauseを0として、ぬるぬると変化させるアニメーションを作ってみた。
工夫すれば、定点カメラの写真を時間経過的に美しく表現することが可能になるのではないかと思う。

CSSのdisplay:table;サンプル

ul liでコーディングした場合。

CSS

.bxslider ul{
display:table;
}
.bxslider ul li{
display:table-cell;
}

JavaScript

$(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
});