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

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

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

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

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