0 
$(".carousel-inner img").load(function(){
    var pic_height = $(this).height();
    var should_height = $(this).parents('.item').height();
    var pad = (should_height - pic_height ) / 2;
    $(this).css('margin-top',pad);
});

この関数は、javascriptを使用して、画像をその親divの垂直方向の中央に配置します。

直後にやってみました.carousel()。ただし、最初の画像のみが垂直方向の中央に配置され、画像がまだ「ロード」されていないため（したがって、pic_height 0になっているため）、残りの画像が台無しになっていることに気付きました。

私の解決策は、カルーセルが次のスライドに移動した直後にこの関数を呼び出すことです。

ただし、ブートストラップjavascriptファイルに慣れていません。この関数はどこに追加しますか？この関数をトリガーするにはどうすればよいですか？

私はcssソリューションを望んでいません。cssでの私の要件のため、純粋なcssソリューションは機能しません。（私は純粋なcss垂直整列のために本のすべてのトリックを試しましたが、私の状況はうまくいきません。）

4

1 に答える 1

0

I think you could position each images on dom ready like this :

$(".carousel-inner img").each(function(i, e){
    var pic_height = $(e).height();
    var should_height = $(e).parents('.item').height();
    var pad = (should_height - pic_height ) / 2;
    $(e).css('margin-top',pad);
});

If you want to trigger it on slide, bootstrap carousel provides the following events :

  • slide : This event fires immediately when the slide instance method is invoked.

  • slid : This event is fired when the carousel has completed its slide transition.

Translated to jQuery it'll be :

$('.carousel').on('slide', function(e) { /* your code */ });
于 2013-03-12T09:35:55.153 に答える