Bootstrap Carousel - проблемы с анимацией и запасом

Question

Я использую Bootstrap 3.2.0. На версии 2.3.2 все работало нормально, но после обновления до 3.2.0 моя карусель начала вести себя странно.

Я заметил две проблемы:

• Не работает анимация (текст должен выглядеть плавно и двигаться сверху, как в коде)
• margin-top на первом .item хорошо (элемент находится в середине), но в последние два .items его ближе к нижней части div

Мой код здесь: http://jsfiddle.net/crvfn2nL/2/

JS

jQuery(function($) {

    //#main-slider
    $(function(){
        $('#image-slider.carousel').carousel({
            interval: 8000
        });
    });

    $( '.centered' ).each(function( e ) {
        $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
    });

    $(window).resize(function(){
        $( '.centered' ).each(function( e ) {
            $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
        });
    });
});

CSS

 #image-slider #carousel, #image-slider #carousel .carousel-inner {
    width:100%;
    margin:0 auto;
    text-align:center;
    min-height:100%;
}

#image-slider #carousel, #image-slider #carousel .carousel-inner .item {
width:100%;
height:100%;
min-height:100%;
 background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height:400px;
}

.item-nr-1 {
    background:url('http://ibin.co/1iuR0HvTp3aU');
}

.item-nr-2 {
    background:url('http://ibin.co/1iuRE1en7Wdm');
}

.item-nr-3 {
    background:url('http://ibin.co/1iuRPP1uYfye');
}

#image-slider #carousel h2 {
  font-size: 36px;
}


#image-slider .carousel .carousel-inner .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}
#image-slider .carousel .carousel-inner .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}
#image-slider .carousel .carousel-inner .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}
#image-slider .carousel .carousel-inner .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}

#image-slider {
    margin-top:80px;    
}

Это почему?

Спасибо

Answer 1

Попробуй это...

 $( '.centered' ).each(function( e ) {
  $(this).css('margin-top',  ($('.item').height())/2-$('.centered').height()/1.5);
 });

 $(window).resize(function(){
  $( '.centered' ).each(function( e ) {
   $(this).css('margin-top',  ($('.item').height())/2-$('.centered').height()/1.5);
  });
 });

Предыдущее значение margin-top менялось с изображениями в карусели. Вместо того, чтобы делить вычитание обеих высот на 2, просто делите отдельно с разными значениями. Надеюсь это поможет.