0

画像の上にロゴを浮かせ、CSS を調整するために、カルーセルに読み込まれた各画像の幅を取得する必要があります。使用される jQuery は最初のスライドの幅のみを取得し、他のすべてのスライドは幅 0 を返します。Bootstrap Carousel が画像を遅延読み込みしているのではないかと思いましたが、「load()」関数に到達していないようです全て。すべての画像の幅を取得するにはどうすればよいですか?

フィドルはここで問題を示しています: http://jsfiddle.net/7SwtW/6/

console.log($('.item:eq(0) img').width()); //gets the correct width: 301
console.log($('.item:eq(1) img').width()); //gets 0
console.log($('.item:eq(2) img').width()); //gets 0

$('.item:eq(0) img').load(function () {
    //doesn't get here        
    imgWidth = $(this).width();
    console.log(imgWidth);
});

$('.item:eq(1) img').load(function () {
    //doesn't get here        
    imgWidth = $(this).width();
    console.log(imgWidth);
});

$('.item:eq(2) img').load(function () {
    //doesn't get here        
    imgWidth = $(this).width();
    console.log(imgWidth);
});
4

2 に答える 2

0

ブートストラップ ドキュメントは、表示されているスライドの内容にアクセスする方法を提供していることがわかりました。

$('#myCarousel').on('slide.bs.carousel', function () {

    var idx = $('#myCarousel .item.active').index();

    console.log($('.item:eq('+idx+') img').width());
})
于 2013-11-04T21:39:36.897 に答える